Hide and Unhide div with the same button

Question

I am using a code that unhides a hidden div.

HTML :

<div id="unhide"  style="display:none;">DUMMY TEXT</div>

<button id="expand" name="expand">Show The Div</button>

JS :

document.getElementById("expand").addEventListener("click", function() 
{
    document.getElementById('unhide').style.display = "block";
});

How can I make the same button hide the div after clicking it again? Is it possible to alter the code I am using now?

Answer 1

use toggle to simple hide and unhide div

$("#expand").click(function() {
    $("#unhide").toggle();
});

Answer 2

Use toggle for this show and shide, see below code.

$(document).ready(function(){
        $("#expand").click(function(){
            $("#unhide").toggle();
        });
});

Answer 3

By doing some modifications in JavaScript, you can use the same button to hide the div as well as you can change the button text like below.

JS:

document.getElementById("expand").addEventListener("click", function() 
{
    var displayDiv = document.getElementById('unhide');
    var displayValue = (displayDiv.style.display === "block") ? "none" : "block";
    this.innerHTML = (displayValue === "block") ? "Hide The Div" : "Show The Div";
    displayDiv.style.display = displayValue;
});

Link reference: https://jsfiddle.net/pitchiahn/hctnvsz1/1/

Answer 4

use simple if-else control flow

document.getElementById("expand").addEventListener("click", function() 
{
    var elem = document.getElementById('unhide');

    if(elem.style.display == "none") { elem.style.display = "block"; }
    else { elem.style.display = "none"; }
});

Answer 5

You can use .toggle()

$('#buttonId').on('click', function(e){
    $("#DivId").toggle();
    $(this).toggleClass('class1')
});​

.class1
{
     color: orange;
}​

Answer 6

use toggleClass() to toggle the class for the button

 $('#buttonLogin').on('click', function(e){ $("#login_Box_Div").toggle(); $(this).toggleClass('class1') });​ .class1 { color: orange; }​

Answer 7

document.getElementById("expand").addEventListener("click", function() 
{
    if(document.getElementById('unhide').style.display == 'block')
          document.getElementById('unhide').style.display = 'none';
       else
          document.getElementById('unhide').style.display = 'block';
});

you can check the running snippet here

Answer 8

this is pure java script

 var button = document.getElementById('button'); // Assumes element with id='button' button.onclick = function() { var div = document.getElementById('newpost'); if (div.style.display !== 'none') { div.style.display = 'none'; } else { div.style.display = 'block'; } };

Answer 9

This worked very well for me, hope it can help someone else. it opens a hidden div in an absolute position and closes it with the same button or the button in the div. I use it for menu functions.

<div id="myDiv6" style="border:1px solid;background: rgba(255, 255, 255, 
0.9);display: none;position: absolute; top: 229px; left: 25%; z- 
index:999;height: auto;
width: 500px;">
    
<h2 >menu item</h2>
  

what ever you want in the hidden div

<button style="cursor: pointer;border-radius: 12px;background-image: linear- 
gradient(to right, red,yellow);font-size:16px;" 
onclick="changeStyle6()">Close</button>
    
</div>


<br/>
<button style="cursor: pointer;border-radius: 12px;background-image: linear- 
gradient(to right, red,yellow);font-size:16px;width: 125px;" 
onclick="changeStyle6()">button text</button><br/>

<script type="text/javascript">
function changeStyle6(){        
var element = document.getElementById("myDiv6");
if(element.style.display == "none") { element.style.display = "block"; }
else { element.style.display = "none"; }
}    
</script>