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.
Chevelure d’Yvette oblige, j’ai pris du orange
background-color : #D64203;
cursor:pointer;
}
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.
$('.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é
}
});
});
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 
A consulter également :
ShareThis
Salut,
Ton tuto est très pratique. Je cherche cependant à y ajouter une fonctionnalité. Comment serait-il possible, au clic sur un titre, qu’un block déjà déroulé, se referme à l’ouverture d’un nouveau ?
Merci d’avance