web-dev-qa-db-fra.com

Comment activer / désactiver la visibilité d'une div à l'aide d'un clic de bouton

Vous trouverez ci-dessous le code javascript avec lequel je montrais un div lorsque je cliquais sur un button.

Comment puis-je le cacher quand on clique à nouveau? Et puis en cliquant dessus, div devrait ê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>
javascriptcsshtmlshow-hide
27
user2827600

Si vous êtes intéressé par une solution jQuery:

C'est le HTML

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

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

Et puis utilisez cette ligne pour commencer:

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

Donc, dans 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/

27
Jan

Pour basculer le style d'affichage entre 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/

57
Gigo

Essayez de suivre la logique:

<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>
1
Ahsan Shah

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

$( ".target" ).toggle();
0
Sobin Augustine

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>
0
Jacques ジャック