onclick display none code example

Example 1: javascript hide div

// javascript
<script>
	document.getElementById("id").style.display = "none";  //hide
	document.getElementById("id").style.display = "block"; //show
	document.getElementById("id").style.display = ""; 	   //show
</script>

// html
<html>
	<div id="id" style="display:none">
    <div id="id" style="display:block">
</html>

// jquery
<script>
	$("#id").hide();      
	$("#id").show();
</script>

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>

Tags:

Html Example

Recent Posts