css show hide div on click code example

Example 1: how to show hide div in html javascript

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

Example 2: how to make a div appear onclick

function showDiv() {
  document.getElementById('sign-in').style.display = "block";
}

Example 3: how to make a div appear onclick

<a class="btn btn-default log-bar" href="#" role="button" onclick="showDiv()">Login</a>


<div id="sign-in" class="login" style="display: none;">
  <form>
    <div class="row">
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="email" class="form-control" id="email" Placeholder="email">
        </div>
      </div>
      <div class="col-md-3">
        <div class="form-group inline-form">
          <input type="password" class="form-control" id="pwd">
        </div>
      </div>
      <div class="col-md-3">
        <div class="checkbox">
          <label><input type="checkbox"> Remember me</label>
        </div>
      </div>
      <div class="col-md-3">
        <button type="submit" class="btn btn-default ">Submit</button>
      </div>
    </div>
  </form>
</div>

Example 4: toggle element javascript

document.querySelector("#test").hidden = true;
document.querySelector("#test").hidden = false;

Tags:

Css Example

Recent Posts