How can I hide/show a div when a button is clicked?

Question

I have a div that contains a register wizard, and I need hide/show this div when a button is clicked. How can I do this?

Below I show you the code.

Thanks :)

  <div id="wizard" class="swMain">
    <ul>
      <li><a href="#step-1">
            <label class="stepNumber">1</label>
        </a></li>
      <li><a href="#step-2">
            <label class="stepNumber">2</label>
        </a></li>
      <li><a href="#step-3">
            <label class="stepNumber">3</label>
         </a></li>
      <li><a href="#step-4">
            <label class="stepNumber">4</label>
        </a></li>
    </ul>
    <div id="step-1"> 
        <h2 class="StepTitle">Perfil</h2>
        <table cellspacing="3" cellpadding="3" align="center">
            <tr>
                  <td align="center" colspan="3">&nbsp;</td>
            </tr>        
            <tr>
                  <td align="right">Username :</td>
                  <td align="left">
                    <input type="text" id="username" name="username" value="" class="txtBox">
                  </td>
                  <td align="left"><span id="msg_username"></span>&nbsp;</td>
            </tr>
            <tr>
                  <td align="right">Password :</td>
                  <td align="left">
                    <input type="password" id="password" name="password" value="" class="txtBox">
                  </td>
                  <td align="left"><span id="msg_password"></span>&nbsp;</td>
            </tr>                                          
       </table>               
    </div>

possible duplicate of http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button — Frederik.L, Apr 30 '13 at 21:15

score 55 · Accepted Answer · edited Jun 26 '16 at 11:41

55

Use JQuery. You need to set-up a click event on your button which will toggle the visibility of your wizard div.

$('#btn').click(function() {
    $('#wizard').toggle();
});

Refer to the JQuery website for more information.

This can also be done without JQuery. Using only standard JavaScript:

<script type="text/javascript">
   function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
   }
</script>

Then add onclick="toggle_visibility('id_of_element_to_toggle');" to the button that is used to show and hide the div.

edited Jun 26 '16 at 11:41

spongebob

8,370
15
50
83

answered Apr 30 '13 at 20:55

Paul Welbourne

1,063
10
16

I do think that the OP is looking for an easier solution than having to use a third-party library (jQuery not tagged). This can be done without JQuery. – Frederik.L Apr 30 '13 at 21:10
5

Just a note to the OP: use `visibility: hidden/ visible;` when you don't want the #wizard div to free space for other elements. Use `display: none/ block;` if you want the #wizard div to be hidden with a size, margin & padding properties equivalent to 0 when hidden. – webketje Apr 30 '13 at 21:34

score 18 · Answer 2 · edited Jan 04 '17 at 14:46

18

This works:

     function showhide(id) {
        var e = document.getElementById(id);
        e.style.display = (e.style.display == 'block') ? 'none' : 'block';
     }

    <!DOCTYPE html>
    <html>   
    <body>
    
     <a href="javascript:showhide('uniquename')">
      Click to show/hide.
     </a>
    
     <div id="uniquename" style="display:none;">
      <p>Content goes here.</p>
     </div>
    
    </body>
    </html>

edited Jan 04 '17 at 14:46

PiggyPlex

631
1
4
15

answered Feb 03 '15 at 20:13

xpt

20,363
37
127
216

Thanks for the easy and efficient solution :) – Swapna Lekshmanan Jan 08 '16 at 11:21

score 6 · Answer 3 · answered Apr 30 '13 at 21:00

6

This can't be done with just HTML/CSS. You need to use javascript here. In jQuery it would be:

$('#button').click(function(e){
    e.preventDefault(); //to prevent standard click event
    $('#wizard').toggle();
});

answered Apr 30 '13 at 21:00

Jarek Jakubowski

948
10
22

score 5 · Answer 4 · answered Mar 07 '14 at 09:36

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Show and hide div with JavaScript</title>
<script>

    var button_beg = '<button id="button" onclick="showhide()">', button_end = '</button>';
    var show_button = 'Show', hide_button = 'Hide';
    function showhide() {
        var div = document.getElementById( "hide_show" );
        var showhide = document.getElementById( "showhide" );
        if ( div.style.display !== "none" ) {
            div.style.display = "none";
            button = show_button;
            showhide.innerHTML = button_beg + button + button_end;
        } else {
            div.style.display = "block";
            button = hide_button;
            showhide.innerHTML = button_beg + button + button_end;
        }
    }
    function setup_button( status ) {
        if ( status == 'show' ) {
            button = hide_button;
        } else {
            button = show_button;
        }
        var showhide = document.getElementById( "showhide" );
        showhide.innerHTML = button_beg + button + button_end;
    }
    window.onload = function () {
        setup_button( 'hide' );
        showhide(); // if setup_button is set to 'show' comment this line
    }
</script>
</head>
<body>
    <div id="showhide"></div>
    <div id="hide_show">
        <p>This div will be show and hide on button click</p>
    </div>
</body>
</html>

score 3 · Answer 5 · answered Jun 26 '17 at 20:29

3

The following solution is:

briefest. Somewhat similar to here. It's also minimal: The table in the DIV is orthogonal to your question.
fastest: getElementById is called once at the outset. This may or may not suit your purposes.
It uses pure JavaScript (i.e. without JQuery).
It uses a button. Your taste may vary.
extensible: it's ready to add more DIVs, sharing the code.

mydiv = document.getElementById("showmehideme");

function showhide(d) {
    d.style.display = (d.style.display !== "none") ? "none" : "block";
}

#mydiv { background-color: #ddd; }

<button id="button" onclick="showhide(mydiv)">Show/Hide</button>
<div id="showmehideme">
    This div will show and hide on button click.
</div>

answered Jun 26 '17 at 20:29

Calaf

10,113
15
57
120

Hmmmm ... TypeError: d is null when the button is clicked. How do we get this snippet to work ? – MarcoZen Jul 29 '18 at 11:25
@MarcoZen It runs fine on Chrome, Firefox, and Safari. Which browser are you using? – Calaf Jul 29 '18 at 18:27
Firefox... Not at home now ... So cant comment on the version. Thanks for taking the time to respond. Much appreciated. – MarcoZen Jul 30 '18 at 06:37

score 2 · Answer 6 · edited Jan 28 '15 at 06:23

2

 $('#btn').click(function() {
     $('#wizard').toggle(); 
 });

if you want to begin with the div hidden, you should add style="display:none;", like this:

<div style="display:none;"> </div>

edited Jan 28 '15 at 06:23

Pang

9,564
146
81
122

answered Jan 28 '15 at 05:32

Jlcanizales

21
1
8

score 1 · Answer 7 · answered Aug 09 '14 at 14:18

Task can be made simple javascript without jQuery etc.

<script type="text/javascript">
function showhide() {
document.getElementById("wizard").className = (document.getElementById("wizard").className=="swMain") ? swHide : swMain;
}
</script>

This function is simple if statement that looks if wizard has class swMain and change class to swHide and else if it's not swMain then change to swMain. This code doesn't support multiple class attributes but in this case it is just enough.

Now you have to make css class named swHide that has display: none

Then add on to the button onclick="showhide()"

So easy it is.

score 1 · Answer 8 · edited May 11 '15 at 17:11

1

You can do this entirely with html and css and i have.

HTML First you give the div you wish to hide an ID to target like #view_element and a class to target like #hide_element. You can if you wish make both of these classes but i don't know if you can make them both IDs. Then have your Show button target your show id and your Hide button target your hide class. That is it for the html the hiding and showing is done in the CSS.

CSS The css to show and hide this should look something like this

#hide_element:target {
    display:none;
}

.show_element:target{
    display:block;
}

This should allow you to hide and show elements at will. This should work nicely on spans and divs.

edited May 11 '15 at 17:11

micbobo

862
7
24

answered May 11 '15 at 16:36

Matthew Henson

11
1

1

I like this, the only problem is that it requires the use of an ID. For me, this is problematic because I may have multiple text blocks that are generated dynamically. For a simple static html site though this is good. – Cameron Feb 04 '19 at 20:41
Can someone please explain how to have buttons target IDs/classes? – blakemade Dec 04 '19 at 17:22

score 0 · Answer 9 · answered Jun 17 '21 at 08:19

You can do so by making a class with visibility as hidden or display as none and then toggling that class through javascript on the element you wish to.

const para = document.querySelector("div");
const btn = document.querySelector('button');

btn.addEventListener('click', ()=>{
  para.classList.toggle('visibility-toggle')
})

.visibility-toggle{
    visibility: hidden;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>Show/Hide</button>
<div>
    <h2>Heading</h2>
    <p>Click the button above me to hide me.</p>
</div>
</body>
</html>

How can I hide/show a div when a button is clicked?

9 Answers9

Linked

Related