Hide and Show Div tag in HTML-CodePudding

Here I am trying to hide the block of but for first time I need to double Click the button every time the page is refreshed. I have attached my code below for reference.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
      display: none;
    }
  </style>
</head>

<body>

  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
  <button onclick="myFunction()">Try it</button>
  <div id="myDIV">
    This is my DIV element.
  </div>

  <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>
</body>

</html>

Why is that and can someone let me know where I am making mistake ?

CodePudding user response：

As explained by this answer on SO, only the inline style, or the style applied to the element as an attribute to the element such as <div style="diplay:none;"></div> will show up when you access element.style. You need to access computedStyle to get the style applied on the element from anywhere in the document.

To get the computedStyle of an element, you can use:

window.getComputedStyle(element).display

So, your JS code is supposed to look like:

function myFunction() {
  var x = document.getElementById("myDIV");
  console.log(typeof x)
  console.log(window.getComputedStyle(x).display)
  if (window.getComputedStyle(x).display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

Try it right here:

function myFunction() {
  var x = document.getElementById("myDIV");
  if (window.getComputedStyle(x).display == "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

#myDIV {
  width: 100%;
  padding: 50px 0;
  text-align: center;
  background-color: lightblue;
  margin-top: 20px;
  display:none;
}

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

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

CodePudding user response：

At the first click, the div element is not found on the page as the CSS makes it display: none. So the first if block is not being carried out. It sets the element display as none at first click and on second click it changes the value to block.

So, we need to check if the display attribute value is none or "" at first click.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #myDIV {
            width: 100%;
            padding: 50px 0;
            text-align: center;
            background-color: lightblue;
            margin-top: 20px;
            display: none;
        }
    </style>
</head>
<body>

<p>Click the "Try it" button to toggle between hiding and showing the DIV
    element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
    This is my DIV element.
</div>

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

<script>
    function myFunction() {
        var x = document.getElementById("myDIV");
        
        if (x.style.display === "none" || x.style.display === "") {
            x.style.display = "block";
        } else {
            x.style.display = "none";
        }
    }
</script>

</body>
</html>

CodePudding user response：

Pretty similar to @arsho's answer, you can define it's inline CSS as display:none first.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
    }
  </style>
</head>

<body>
  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

  <button onclick="myFunction()">Try it</button>

  <div id="myDIV" style="display: none;">This is my DIV element.</div>

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

  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display == "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>
</body>

</html>

CodePudding user response：

The problem is that initially style.display is not set to anything (the inline style has not been set).

So instead of testing for 'none' test for NOT 'block'. That way the test will be achieved even on the first time through.

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;
      display: none;
    }
  </style>
</head>

<body>

  <p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

  <button onclick="myFunction()">Try it</button>

  <div id="myDIV">
    This is my DIV element.
  </div>

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

  <script>
    function myFunction() {
      var x = document.getElementById("myDIV");
      if (x.style.display != "block") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
  </script>

</body>

</html>

CodePudding user response：

An elegant approach would be to simply use the toggle function. You need only to add a hide class which you can toggling.

    function myFunction() {
      var x = document.getElementById("myDIV");
      x.classList.toggle('hide');      
    }

    #myDIV {
      width: 100%;
      padding: 50px 0;
      text-align: center;
      background-color: lightblue;
      margin-top: 20px;      
    }

.hide {
  display: none;
}

    <!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>
    
    <button onclick="myFunction()">Try it</button>
    
    <div id="myDIV" >
    This is my DIV element.
    </div>
    
    <p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
    
    <script>

    </script>
    
    </body>
    </html>