html show hide div element-CodePudding

I'm trying to show/hide div in html now I'm using w3schools Toggle Hide and Show link. It is working good but by default it shows condition I what by default hide condition if I press show button it should show. help me.

code

<!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">
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：

You need to make the following changes in your code. Add a display:none for #myDIV in css to hide it on initial loading. But if you still check in JS (x.style.display), you will get an empty string instead of none. That's beacause the style attribute does not have any setting for display until the code is run through the first time. So to handle this case you need to update your if condition as well like this - if (x.style.display == "none" || x.style.display === "")

You can check here for more info - Similar Question Link

I have attached a snippet. Hope that's how you want it to work.

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

#myDIV {
  width: 100%;
  display: none;
  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>

<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：

I suggest do not update the style property directly, but toggle a class "hidden" instead. Here is a snippet:

function myFunction() {
  const x = document.getElementById("myDIV");
  x.classList.toggle("hidden");
}

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

.hidden {
  display: none;
}

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </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>
  </body>
</html>

If this does not solve your problem, please let me know ;)

CodePudding user response：

Add display:none; to your style and add document.addEventListener on page load to your js as the code below

<!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";
        }
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        myFunction();
    });
</script>

</body>
</html>

CodePudding user response：

Add display: none to the div css,

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

and change the if condition to this:

if (x.style.display == "none" || x.style.display === "")