Et je continue avec ma série jQuery ! Aujourd’hui, l’idée est de réaliser un menu accordéon plutôt cool : Démo menu accordéon. En voici le code HTML :
<dl> <dt>Titre 1</dt> <dd>Exemple 1</dd> <dd>Exemple 2</dd> <dd>Exemple 3</dd> <dd>Exemple 4</dd> <dt>Titre 2</dt> <dd>Exemple 1</dd> <dd>Exemple 2</dd> <dd>Exemple 3</dd> <dt>Titre 3</dt> <dd>Exemple 1</dd> <dd>Exemple 2</dd> <dd>Exemple 3</dd> <dd>Exemple 4</dd> <dd>Exemple 5</dd> <dt>Titre 4</dt> <dd>Exemple 1</dd> <dd>Exemple 2</dd> <dt>Titre 5</dt> <dd>Exemple 1</dd> <dd>Exemple 2</dd> <dd>Exemple 3</dd> <dd>Exemple 4</dd> <dd>Exemple 5</dd> </dl>
Le cahier des charges :
- Au chargement, les balises dd devront être cachées.
- En cliquant sur une balise dt, on fait apparaître les balises dd qui la suive.
- En cliquant sur une autre balise dt, on fait apparaître les balises dd qui la suive et on cache les balises dd précédement ouverte.
- En cliquant à nouveau sur cette balise, on fait disparaître les balises dd qui la suive.
C’est relativement clair, non ? Reste à appliquer le jQuery…
$(document).ready(function() {
// Au chargement, on cache tous les dd
$('dl dd').hide();
// Au clic
$('dl dt').css('cursor', 'pointer').click( function() {
// On ajoute la classe "visible" aux dd associés au dt cliqué, s'ils sont déjà visibles
if ($(this).nextUntil('dt').is('dd:visible'))
$(this).nextUntil('dt').addClass('visible');
// On cache tous les dd
$('dl dd').slideUp();
// On ferme les dd associés au dt cliqué ayant la classe "visible" (ils étaient ouvert dans les cache)
if ($(this).nextUntil('dt').is('dd.visible'))
$(this).nextUntil('dt').removeClass('visible').slideUp();
// On ouvre les dd associés au dt cliqué qui étaient fermés
else
$(this).nextUntil('dt').slideDown();
});
});
Tester cet exemple
L’avantage de ce code est qu’il ne dépend pas de l’id ou des class des éléments. On peut donc l’utiliser pour n’importe quelle configuration, en modifiant les balises si besoin.
