Jump to content

Toggle Hide/Show


Milan...

Recommended Posts

Welcome to the forums!

This one is a pretty simple fix, all you need to do is add a style to your div.

<button onclick="myFunction()">Click Me</button>

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

 

Link to comment
Share on other sites

  • 2 weeks later...

HTML:

<button onclick="myFunction()">Click Me</button>

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

Javascript :

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

Edited by shaili_shah
Link to comment
Share on other sites

Although this is the JS forum, there is a non-JS solution for programming completeness only.

	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width-device-width,initial-scale=1.0, user-scalable=yes"/>
<title> Hide/Show CSS only </title>
<!-- For: http://w3schools.invisionzone.com/topic/60050-toggle-hideshow/ -->
<style>
 #myDIV {
   width: 100%;
   padding: 50px 0;
   text-align: center;
   background-color: lightblue;
   margin-top: 20px;
   display: none;
 }
 #myBtn:checked + div { display: block; }
 label { border: 1px solid black;  border-radius: 5px;
         background: lightblue; padding: 0.5em;
       }
</style>
</head>
<body>
<label for="myBtn">Click Me</label>
<input type="checkbox" hidden id="myBtn">
<div id="myDIV">
  This is my DIV element.
</div>
</body>
</html>
	

Moderators can move to CSS section if deemed appropriate.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...