Voici comment créer un menu accordéon avec jQuery. On crée des titres (h3) à qui l’on affecte la classe menuYvette et sous chaque titre on créé une div avec la classe divEtte.
Démo ici.
[cc lang=’html’ width=’100%’]
Mon menu 1
Mon menu 2
Mon menu 3
[/cc]
Chevelure d’Yvette oblige, j’ai pris du orange
[cc lang=’css’ width=’100%’]
h3.menuYvette{
background-color : #D64203;
cursor:pointer;
}
[/cc]
cursor:pointer; est important car il permet d’obtenir la « main » au survol des titres menuYvette ce qui permet au visiteur de savoir qu’il peut cliquer !
Le but est de masquer au démarrage l’ensemble des div de contenu divEtte pour ne les afficher qu’au cas par cas, en fonction du clic sur le titre correspondant.
[cc lang=’js’ width=’100%’]
$(document).ready(function() {
$(‘.divEtte’).hide(); // Au départ on masque toutes les div de contenu « divEtte »
$(‘.menuYvette’).click(function() { // action sur clics d’élément de classe menuYvette
$(this).siblings(‘div:visible’).slideUp(); // on enroule les soeurs (siblings) « divEtte »
if($(this).next(‘div:hidden’)){
$(this).next(‘div:hidden’).slideDown(); // on déroule le contenu s’il était masqué
}
});
});
[/cc]
Merci Yvette !
Article fortement inspiré du blog de Arnaud Koncina, j’ai simplement ajouté la possibilité de rétracter la div en re-cliquant sur le même titre et mis des classes sur les titres pour rendre à Yvette ce qui est à Yvette 😉
