Div showing on clicking button twice in the initial state

Admin 1
Viewed 91

In the very initial state, I need to click on Read More button TWICE to have the content below show. Weird - how do i fix this problem? I only want to click on Read More button once to show the content underneath it.

function myFunction() {
    var x = document.getElementById("myDIV");
    var btnText = document.getElementById("myBtn");
    if (x.style.display === "none") {
    x.style.display = "block";
    btnText.innerHTML = "Read less";
    } else {
    x.style.display = "none";
    btnText.innerHTML = "Read More";
    }
    }
   #myDIV {
    display: none;
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top: 20px;
    }
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
    <div id="myDIV">
    This is my DIV element.
    </div>
    <button onclick="myFunction()" id="myBtn">Read More</button>
    <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

css html jquery
2 Answers

You should include a check if myDiv's display style is empty.

function myFunction() {
  var x = document.getElementById("myDIV");
  var btnText = document.getElementById("myBtn");

  if (x.style.display === "none" || x.style.display === "") { // notice this line
    x.style.display = "block";
    btnText.innerHTML = "Read less";
  } else {
    x.style.display = "none";
    btnText.innerHTML = "Read More";
  }
}
#myDIV {
  display: none;
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
<p>
  Click the "Try it" button to toggle between hiding and showing the DIV element:
</p>
<div id="myDIV">
  This is my DIV element.
</div>

<button onclick="myFunction()" id="myBtn">Read More</button>

<p>
  <b>Note:</b> The element will not take up any space when the display property set to "none".
</p>

user_80626590

The reason it's working on two clicks is that the DOM is ready but the script does not knows that the div's style is display: none.

There are two ways you can fix this:

Using window.getComputedStyle()

The Window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.

This way it will ensure that content will show in one click.

Demo:

function myFunction() {
  var x = document.getElementById("myDIV");
  var displayDiv = window.getComputedStyle(x).display; //this function
  var btnText = document.getElementById("myBtn");
  if (displayDiv === "none") {
    x.style.display = "block";
    btnText.innerHTML = "Read less";
  } else {
    x.style.display = "none";
    btnText.innerHTML = "Read More";
  }
}
#myDIV {
  display: none;
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>

  </style>
</head>

<body>
  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
  <div id="myDIV">
    This is my DIV element.
  </div>
  <button onclick="myFunction()" id="myBtn">Read More</button>
  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>

</html>

Using Inline styling on the div

You could simply set the display to inline style as display:none.

This way it will ensure that content will show in one click.

Demo:

function myFunction() {
  var x = document.getElementById("myDIV");
  var btnText = document.getElementById("myBtn");
  if (x.style.display === "none") {
    x.style.display = "block";
    btnText.innerHTML = "Read less";
  } else {
    x.style.display = "none";
    btnText.innerHTML = "Read More";
  }
}
#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>

  </style>
</head>

<body>
  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
  <div id="myDIV" style="display: none;">
    This is my DIV element.
  </div>
  <button onclick="myFunction()" id="myBtn">Read More</button>
  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
</body>
</html>

user_136690480
Related