Et je continue avec ma série jQuery ! Aujourd’hui, l’idée est de réaliser un menu accordéon plutôt cool. En voici le code HTML : ///
- Titre 1
- Exemple 1
- Exemple 2
- Exemple 3
- Exemple 4
- Titre 2
- Exemple 1
- Exemple 2
- Exemple 3
- Titre 3
- Exemple 1
- Exemple 2
- Exemple 3
- Exemple 4
- Exemple 5
- Titre 4
- Exemple 1
- Exemple 2
- Titre 5
- Exemple 1
- Exemple 2
- Exemple 3
- Exemple 4
- Exemple 5
/// 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|/public/Jquery/menu/]__ 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.