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