THE WORLD'S LARGEST WEB DEVELOPER SITE

How TO - Toggle Hide and Show


Toggle between hiding and showing an element with JavaScript.


Click the button!

Toggle (Hide/Show) an Element

Step 1) Add HTML:

Example

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

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

Step 2) Add JavaScript:

Example

function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
Try it Yourself »