Articles Taggés ‘slideDown’

Menu Yvette Horner en jQuery (menu accordéon)

15 mars 2010

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 contenu à afficher
Coucou ici le contenu 2
Enfin à moi ! le contenu 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 !
yvette horner

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 😉

Version bureau | Passer à la version mobile