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> 

Answer 1

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.