Comment basculer dynamiquement la visibilité Div avec un bouton ?

Basculer dynamiquement la visibilité d'un div avec un bouton

Vous souhaitez basculer de manière transparente la visibilité d'un élément div avec un clic sur un bouton ? Voici comment y parvenir :

JavaScript pur :

Considérez la structure HTML suivante :

<code class="html"><div id="newpost"></div></code>

Pour basculer la visibilité en utilisant du JavaScript pur, vous pouvez utiliser :

<code class="js">var button = document.getElementById('button');

button.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};</code>

jQuery :

Avec la simplicité de jQuery, vous pouvez utiliser :

<code class="js">$("#button").click(function() { 
    $("#newpost").toggle();
});</code>

Les deux solutions vous permettent de basculer la visibilité de l'élément div "newpost" lorsque l'on clique sur le bouton avec l'ID "bouton". L'élément div bascule entre les états « caché » et « visible » à chaque clic sur un bouton.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!