Comment faire pour basculer la visibilité d'un div? En utilisant un bouton, cliquez

Voici mon code javascript que j'ai utilisé pour afficher une div lorsqu'on clique sur un button .

Comment puis-je la masquer lorsqu'on clique à nouveau? Et puis, en cliquant dessus, div devrait-il être visible à nouveau?

 <script type="text/javascript"> var _hidediv = null; function showdiv(id) { if(_hidediv) _hidediv(); var div = document.getElementById(id); div.style.display = 'block'; _hidediv = function () { div.style.display = 'none'; }; } </script> 

Dans le cas où vous êtes intéressé par un soluton jQuery:

C'est le HTML

 <a id="button" href="#">Show/Hide</a> <div id="item">Item</div> 

C'est le script jQuery

 $( "#button" ).click(function() { $( "#item" ).toggle(); }); 

Vous pouvez le voir fonctionner ici:

http://jsfiddle.net/BQUyT/

Si vous ne savez pas comment utiliser jQuery, vous devez utiliser cette ligne pour charger la bibliothèque:

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 

Ensuite, utilisez cette ligne pour commencer:

 <script> $(function() { // code to fire once the library finishes downloading. }); </script> 

Donc, pour ce cas, le code final serait le suivant:

 <script> $(function() { $( "#button" ).click(function() { $( "#item" ).toggle(); }); }); </script> 

Fait moi savoir si tu as besoin de quoique ce soit d'autre

Vous pouvez en savoir plus sur jQuery ici: http://jquery.com/

Pour changer le style d'affichage entre le block et none vous pouvez faire quelque chose comme ceci:

 function toggleDiv(id) { var div = document.getElementById(id); div.style.display = div.style.display == "none" ? "block" : "none"; } 

Démo de travail: http://jsfiddle.net/BQUyT/2/

Essayez la logique suivante:

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

Avec JQuery .toggle() vous pouvez l'accomplir facilement

 $( ".target" ).toggle(); 

JQuery serait le moyen le plus simple si vous voulez l'utiliser, mais cela devrait fonctionner.

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