Afficher ou cacher des éléments HTML

20 min Niveau 8

Dans ce nouveau cours, nous étudierons deux méthodes, elles permettent soit simplement d'afficher ou de masquer un élément immédiatement, soit de l'afficher ou de le masquer progressivement en combinant des effets de slide et de fondu.

Afficher ou cacher un contenu instantanément avec show() et hide()

Les méthodes show() et hide() nous permettent respectivement d'afficher le contenu HTML masqué ou de masquer le contenu HTML visible.

Nous pouvons déjà utiliser ces méthodes sans paramètres pour afficher ou masquer les éléments immédiatement.

Dans la première utilisation la plus basique, les méthodes show() et hide() seront lues dans l'état de propriété d'affichage CSS de l'élément HTML cible. La propriété CSS display va voir son état changé entre display et none.

<body>
    <h1>Titre principal</h1>
    <button id="button1">Cache</button>
    <button id="button2">Affiche</button>
</body>

$(document).ready(function(){     
    $("#button1").click(function () {
        //Cache le titre h1
        $("h1").hide();
    });

    $("#button2").click(function () {
        //Affiche le titre h1
        $("h1").show();
    });
});

Afficher ou cacher un contenu progressivement avec show() et hide()

Se connecter pour voir la suite

Besoin d'aide ?

Rejoignez notre communauté officielle et ne restez plus seul à bloquer sur un problème !