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é
[/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é
[/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
