SlideToggle : simplifiez vous la vie pour afficher et masquer un élément

2 mars 2010 par blog.yann Laisser une réponse »

Dans la série jQuery simplifie moi la vie, voici la méthode .slideToggle.

Voir la démo

Imaginez que vous avez un div monBloc que vous voulez masquer ou afficher en fonction du clic sur le lien displayBloc

<a id="displayBloc" href="#">Contenu masqué</a>
<div id="monBloc">Lorem Ipsum</div>

Plutôt que de s’amuser à appeler une fonction afficheMasque sur l’évènement onclick du lien pour un résultat sans animation comme ci-dessous :

function afficheMasque(){
     if(document.getElementById('monBloc').style.display=='none'){
        document.getElementById('monBloc').style.display='block';
    }else{
        document.getElementById('monBloc').style.display='none';
    }
}

Utilisez slideToggle pour obtenir la même chose avec une animation.

$(document).ready(function(){
    $("#displayBloc").click(function () {
        $("#monBloc").slideToggle("slow");
    });
});

La vitesse d’apparition/disparition du bloc est déterminée par ‘fast’ ou ‘slow’ ou être spécifié en millisecondes.

N’oubliez pas d’inclure l’appel à jQuery dans la balise HEAD.

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

Pour aller plus loin, vous pouvez également utiliser toggleClass qui vous permet de permuter une classe (ajouter/retirer la classe à l’élément). Ainsi on peut afficher une flèche haut/bas (ou +/-) en fonction de l’affichage du contenu.
Pour cela il faut ajouter une classe au lien

<a id="displayBloc" class="deroule" href="#">Contenu masqué</a>
<div id="monBloc">Lorem Ipsum</div>
.deroule{
    display : block;
    width : 120px;
    background: url(fleches.gif) no-repeat right -50px;
}

.enroule {
    background: url(fleches.gif) no-repeat right 8px;
}

Ensuite on ajoute la méthode toggleClass qui va ajouter ou supprimer la classe enroule et donc dans l’exemple décaler l’image contenant les flèches

$(document).ready(function(){
    $("#displayBloc").click(function () {
        $("#monBloc").slideToggle("slow");
        $(this).toggleClass("enroule"); return false;
    });
});

Plus d’infos sur la documentation de jQuery



ShareThis

Posté dans Developpement, Jquery, Web

Tags:

Vous pouvez suivre n'importe laquelle de ces entrées à travers le Flux RSS 2.0. Vous pouvez laisser une réponse , ou rétrolien à partir de votre propre site.

Publicité

3 commentaires

Ajouter votre commentaire
  1. Gillaume dit :
    2 avril 2010 à

    Bonjour,
    Merci pour cet article fort sympatique, mais j’ai une question pour bien comprendre,
    - Comment faire pour que par défaut le div soit enroulé ?

  2. blog.yann dit :
    2 avril 2010 à

    Bonjour,
    En fait, il suffit de dire qu’au chargement le contenu est caché, grâce la fonction hide(), comme ça, ensuite quand tu vas cliquer, l’ordre des événements seront inversés.
    Concrètement, avant la fonction click (juste après $(document).ready(function(){ ) , tu mets :

    $("#monBloc").hide();

    et le tour est joué ;)

  3. tiamat dit :
    3 mars 2011 à

    Bonjour,

    Comment faire pour mettre un + qui se transforme en – plutôt que des flèches, je n’y arrive pas.

Laisser un commentaire