Menu accordéon facile en jQuery

Publié dans Javascript | Marqué avec , ,
Share

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*