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?

like this http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button ? — G.L.P, Nov 03 '16 at 12:19
@G.L.P Cheers. I will update the question because the button will have an anchor too. — Datacrawler, Nov 03 '16 at 15:46
It is too bad the accepted answer is one involving to use jQuery. Not that I have anything against the library, but since jQuery is not mentioned in your question, a vanilla JS answer would be more useful for other users to understand how to do this without using any toolkit. — dashdashzako, Nov 07 '16 at 10:28
@damienc It is the first answer and a simple one (small amount of words). I do not see any vanilla JS answer too. — Datacrawler, Nov 07 '16 at 10:39
@ApoloRadomer yes I second that, I just feel like a more complete answer would be good for the community. I bet many people wonder how to do that kind of UI stuff, and concise answers are good to be copy/pasted, but don't bring as much as I expect in terms of learning. — dashdashzako, Nov 07 '16 at 10:43
I 'd love to see the Vanilla JS answer. I have never used Vanilla. @damienc — Datacrawler, Nov 07 '16 at 11:17
@ApoloRadomer by "vanilla JS", I mean "JS with no extra library involved" ;-) — dashdashzako, Nov 07 '16 at 11:57

score 4 · Accepted Answer · answered Nov 03 '16 at 12:26

4

use toggle to simple hide and unhide div

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

answered Nov 03 '16 at 12:26

Milan Gajjar

701
2
14
24

score 2 · Answer 2 · answered Nov 03 '16 at 12:27

2

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

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

answered Nov 03 '16 at 12:27

Hira Majid

534
2
7
22

score 2 · Answer 3 · answered Nov 03 '16 at 14:41

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/

score 1 · Answer 4 · answered Nov 03 '16 at 12:22

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"; }
});

score 1 · Answer 5 · answered Nov 03 '16 at 12:27

1

You can use .toggle()

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

.class1
{
     color: orange;
}

answered Nov 03 '16 at 12:27

Anand Systematix

632
5
15

score 1 · Answer 6 · answered Nov 03 '16 at 12:27

1

use toggleClass() to toggle the class for the button

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

.class1
{
     color: orange;
}

answered Nov 03 '16 at 12:27

Purushothaman

358
4
22

score 1 · Answer 7 · answered Nov 03 '16 at 12:38

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

score 1 · Answer 8 · answered Nov 11 '16 at 05:54

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';
    }
};

score 0 · Answer 9 · answered Jun 29 '22 at 02:56

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>

Hide and Unhide div with the same button

9 Answers9