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

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
[cc lang=’html’ width=’100%’]
Contenu masqué

Lorem Ipsum

[/cc]

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 :
[cc lang=’javascript’ width=’100%’]
function afficheMasque(){
if(document.getElementById(‘monBloc’).style.display==’none’){
document.getElementById(‘monBloc’).style.display=’block’;
}else{
document.getElementById(‘monBloc’).style.display=’none’;
}
}
[/cc]

Utilisez slideToggle pour obtenir la même chose avec une animation.
[cc lang=’javascript’ width=’100%’]
$(document).ready(function(){
$(« #displayBloc »).click(function () {
$(« #monBloc »).slideToggle(« slow »);
});
});
[/cc]

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.
[cc lang=’html’ width=’100%’]

[/cc]

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
[cc lang=’html’ width=’100%’]
Contenu masqué

Lorem Ipsum

[/cc]

[cc lang=’css’ width=’100%’]
.deroule{
display : block;
width : 120px;
background: url(fleches.gif) no-repeat right -50px;
}

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

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
[cc lang=’javascript’ width=’100%’]
$(document).ready(function(){
$(« #displayBloc »).click(function () {
$(« #monBloc »).slideToggle(« slow »);
$(this).toggleClass(« enroule »); return false;
});
});
[/cc]

Plus d’infos sur la documentation de jQuery



ShareThis

Publicité
  1. Tollip dit :

    Merci pour ce tuto qui m’a bien été utile. Pour ma part au lieu de mettre href= »# » dans le code :
    Contenu masqué
    Lorem Ipsum

    j’ai mis href= »#monbloc » sinon si mon texte caché était en bas de page, cela me renvoyait en haut de page et je devais faire défiler la page pour y revenir. Mais peut-être était-ce un cas particulier.

Laisser un commentaire