Come posso nascondere/mostrare un div quando si fa clic su un pulsante?

Ho un div che contiene una procedura guidata di registrazione e ho bisogno di nascondere/mostrare questo div quando si fa clic su un pulsante. Come posso fare questo?Come posso nascondere/mostrare un div quando si fa clic su un pulsante?

Di seguito 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">&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>

fonte

2013-04-30 Julia

possibile duplicato di http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button –

utilizzare jQuery. Devi impostare un evento click sul tuo pulsante per attivare o disattivare la visibilità del tuo assistente.

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

Per ulteriori informazioni, fare riferimento al sito Web JQuery.

Questo può anche essere fatto senza JQuery. Utilizzando solo JavaScript serie:

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

Quindi aggiungere al pulsante che viene utilizzato per mostrare e nascondere il div.

fonte

2013-04-30 20:55:46 wellers

io credo che il PO sta cercando una soluzione più semplice rispetto al dover utilizzare una libreria di terze parti (jQuery non taggato). Questo può essere fatto senza JQuery. –

Solo una nota all'OP: usa 'visibility: hidden/visible;' quando non vuoi che il #wizard div divida lo spazio per altri elementi. Usa 'display: none/block;' se vuoi che il div #wizard sia nascosto con una dimensione, un margine e le proprietà padding equivalenti a 0 quando sono nascoste. – Tyblitz

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

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

fonte

2013-04-30 21:00:13

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

fonte

2014-03-07 09:36:51 dimitryous

Task può essere reso semplice javascript senza jQuery ecc

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

Questa funzione è semplice se dichiarazione che guarda se guidata ha classe swMain e cambiare classe a swHide e altro se non è swMain quindi passare a swMain. Questo codice non supporta più attributi di classe, ma in questo caso è sufficiente.

Ora si devono fare classe CSS di nome swHide che ha display: none

Quindi aggiungere al tasto onclick = "MostrareNascondere()"

Così è facile.

fonte

2014-08-09 14:18:30 JarnoV

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

se si vuole iniziare con la div nascosto, si dovrebbe aggiungere style="display:none;", in questo modo:

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

fonte

2015-01-28 05:32:22 Jlcanizales

Questo funziona:

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

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

fonte

2015-02-03 20:13:30 xpt

Grazie per la soluzione facile ed efficiente :) –

Puoi fai tutto questo con html e cs io e io abbiamo

HTML In primo luogo vi darà la div si desidera nascondere un ID a bersaglio come #view_element e una classe di destinazione come #hide_element. Puoi se vuoi fare entrambe queste classi ma non so se puoi renderle entrambe ID. Quindi fai in modo che il tuo pulsante Mostra abbia come target il tuo ID show e il tuo pulsante Nascondi target la classe hide. Questo è per il html che il nascondiglio e la visualizzazione sono fatti nel CSS.

CSS Il CSS per mostrare e nascondere questa dovrebbe essere simile a questa

#hide_element:target { 
    display:none; 
} 

.show_element:target{ 
    display:block; 
}

Questo dovrebbe consentire di nascondere e mostrare gli elementi a volontà. Questo dovrebbe funzionare bene su span e div.

fonte

2015-05-11 16:36:32

La seguente soluzione è:

più breve. Un po 'simile a here. È anche minimo: la tabella nel DIV è ortogonale alla tua domanda.
più veloce: getElementById viene chiamato una volta all'inizio. Questo potrebbe non essere adatto ai tuoi scopi.
Utilizza puro JavaScript (cioè senza JQuery).
Utilizza un button. I tuoi gusti possono variare.
estendibile: è pronto per aggiungere più DIV, condividendo il codice.

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>

fonte

2017-06-26 20:29:46 Calaf

Come posso nascondere/mostrare un div quando si fa clic su un pulsante?

risposta

Problemi correlati