Come posso nascondere/mostrare un div quando un pulsante viene cliccato?

Ho un div che contiene una procedura guidata di registrazione, e ho bisogno di nascondere/mostrare questo div quando viene cliccato un pulsante. Come posso farlo?

Qui sotto vi mostro il codice.

Grazie :)

  <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"> </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> </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> </td>
            </tr>                                          
       </table>               
    </div>
chiapa
Domanda modificata 16º giugno 2014 в 2:17
Programmazione
button html hide show
30º aprile 2013 в 8:51
5 visualizzazioni
Soluzione

Usate JQuery. Hai bisogno di impostare un evento click sul tuo pulsante che commuterà la visibilità del tuo div wizard.

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

Fai riferimento al sito web JQuery per maggiori informazioni.

Questo può essere fatto anche senza JQuery. Usando solo JavaScript standard:

<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>

Poi aggiungete onclick="toggle_visibility('id_of_element_to_ggle');" al pulsante che serve per mostrare e nascondere il div.

Francesco Menzani
Risposta modificata 26º giugno 2016 в 11:41
Commentari (2)

Questo non può essere fatto solo con HTML/CSS. È necessario usare javascript qui. In jQuery sarebbe:

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


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

    var button_beg = '', button_end = '';
    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>


    <div id="showhide"></div>
    <div id="hide_show">
        <p>This div will be show and hide on button click</p>
    </div>
Commentari (0)