CODEWITHSUNDEEP
htmljquerycss
user14034987
user14034987

Reputation:

Div showing on clicking button twice in the initial state

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>

Upvotes: 2

Views: 199

Answers (2)

Always Helping
Always Helping

Reputation: 14570

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>

Upvotes: 2

bertdida
bertdida

Reputation: 5288

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>

Upvotes: 3

Related Questions