Créer un menu Accordéon avec jQuery

ArticleAccordion Dernière mise à jour le 18 mai 2013 à 00h25

Non non, détrompez-vous, nous n’utiliserons pas CSS et jQuery pour fabriquer cet instrument de musique à vent ! Bien que les langages évoluent continuellement, dans un contexte aussi poussé seuls quelques poignées de petits génies pourraient pratiquer ce sport extrême ! Dans notre cas, nous allons simplement nous intéresser au menu accordéon, et c’est bien mieux comme ça.

Petit tour d’horizon

Qu’est-ce qu’un menu accordéon ?

Si vous parcourez fréquemment les blogs, vous avez sans doute déjà vu ce type de menus dépliables. Ils sont composés de sections (aussi appelées headers). Ces sections ont toutes un contenu unique, la plupart du temps il s’agit de liens catégorisés pointant vers des sites ou des articles, mais vous pouvez y intégrer ce que vous voulez, vous avez carte blanche !

Comment ça fonctionne ?

Avec ce genre de menu, on sollicite l’action de l’utilisateur par un évènement JavaScript (ex: click, hover, …) qui ouvre le contenu de la section sur laquelle il a interagi.

L’effet visuel de base s’effectue par deux scrolling inversés. Inutile de rentrer dans les détails, sachez tout de même que ce type d’effet ressemble fortement à l’animation du soufflet sur l’instrument de musique lors de son utilisation, d’où l’appellation : “effet accordéon“.

Est-ce vraiment utile ?

Tout dépend du contexte, et de ce que vous souhaitez faire. Le principe même de ce genre de menu est de vous faire gagner de la place et d’améliorer la navigation. On l’utilise couramment pour hiérarchiser un grand nombre de données.

Prenons pour exemple, un blog de voitures. Les articles présents sur ce blog abordent les différentes motorisations pour des modèles de voitures spécifiques. On compte autant d’articles qu’il y a de motorisations pour chaque modèle référencé. Le blog pourrait éventuellement intégrer un menu accordéon comme ceci :

Dans d’autres cas, il représente carrément l’armature même d’un site (ex: book photo, portfolio, …). Véritable objet décoratif, le menu accordéon modernise vos pages en y ajoutant de l’interactivité fonctionnelle avec dynamisme et élégance :

Exemple tiré du tutoriel de Chris Coyier sur CSS-Tricks.com

Créer son menu accordéon

Il existe une multitude de façons pour créer son menu accordéon, nous allons en aborder deux dans cet article :

  • Menu accordéon via jQuery UI, évidemment accompagné de jQuery puisqu’il s’agit d’une surcouche.
  • Menu accordéon via jQuery seulement.

La première méthode est la plus simple à mettre en place, mais elle vous demandera de charger deux librairies, à savoir jQuery & jQuery UI.

La seconde ne vous demandera que la bibliothèque jQuery.

Note : Depuis l’arrivée de CSS3, il est possible de faire ce genre de menu sans utiliser de code JavaScript, autrement dit : avec du CSS pur.

Cependant, le langage CSS3 est tout jeune et par conséquent les anciennes versions de nos navigateurs ne l’interprètent tout simplement pas, c’est ballot…
Si vous ne vous souciez pas de l’accessibilité, vous pouvez suivre le tutoriel de Mary Lou qui vous apprendra à confectionner un menu accordéon en CSS3.

 

Mon menu accordéon avec jQuery UI

Commencez par télécharger les librairies jQuery et jQuery UI, plus placez-les dans votre dossier réservé au JavaScript.

Dans notre page, nous commençons par faire un appel à nos deux librairies :

Abordons maintenant la structure HTML de notre menu qui se compose de trois parties :

  • Un bloc qui englobe votre menu
  • Vos sections qui doivent obligatoirement êtres entourées par un bloc (header)
  • Les contenus de vos sections

On définit le bloc conteneur du menu accordéon :

 

On y intègre nos sections :

 

On rajoute ensuite les balises de contenu :

 

Il est temps d’initialiser le plugin, nous en profitons aussi pour rajouter un paramètre qui est obligatoire pour le bon fonctionnement du menu. Il faut spécifier les nouveaux en-têtes qui par défaut sont les balises de titre <h3> :

 

Voici le code assemblé :

Vous remarquerez que j’ai appliqué du style CSS aux balises de listes non ordonnées de notre menu accordeon, le display: block; est essentiel pour éviter des bogues d’affichage.
Voici ce à quoi ressemble notre menu accordéon :

Comme vous pouvez le constater il est dorénavant fonctionnel, il ne vous reste plus qu’à le rendre plus attrayant avec la puissance du CSS :

Important : Vous avez la possibilité d’ajouter des paramètres à votre fonction accordion() afin de contrôler le comportement du menu accordéon très simplement.

Avec le paramètre icons vous pouvez également ajouter des icônes sur vos en-têtes. Je vous invite à jeter un coup d’oeil à la bibliothèque qui propose tout un panel d’icônes utilisables sur ce plugin.
Pour prendre connaissance des autres paramètres que propose ce widget, reportez-vous à sa documentation technique.

 

Mon menu accordéon avec jQuery

Cette fois-ci, nous n’allons utiliser que la librairie jQuery. La quantité de donnée à charger sera moins importante qu’avec l’autre méthode puisque l’on n’utilise pas jQuery UI.

Attention tout de même car jQuery UI avait le mérite de nous faciliter grandement la tâche. Avec la méthode jQuery, vous allez devoir mettre les mains dans le cambouis. Ne vous inquiétez pas, nous allons décortiquer notre code petit à petit, grâce à cela vous serez en mesure d’effectuer vos propres customisations.

On commence donc par faire notre appel à la librairie jQuery :

Abordons maintenant la structure HTML de notre menu qui se compose de trois parties :

  • Un bloc qui englobe votre menu
  • Vos sections qui doivent obligatoirement êtres entourées par un bloc (header)
  • Les contenus de vos sections

On définit le bloc conteneur du menu accordéon :

On y intègre nos sections :

On rajoute ensuite les balises de contenu :

On attaque maintenant le jQuery en commençant par déclarer deux variables :

La première sélectionne tous les liens qui contiennent la classe .titre
La deuxième sélectionne tous les li qui contiennent la classe .contenuTitre

On attribut la classe “active” au premier .titre de la liste et on ouvre par effet de slide .contenuTitre qui suit .active :

On lance la fonction “click” sur l’une des variables précédemment définies et on désactive l’effet naturel du lien :

On ouvre une condition qui vérifie si le lien sur lequel on a cliqué ne contient pas .titre et .active :

Dans le cas où cette condition est vérifiée, on effectue plusieurs actions. Reportez-vous aux commentaires pour connaître les effets :

Voici le code assemblé et commenté :

Vous remarquerez que j’ai appliqué du style CSS aux balises de listes non ordonnées de notre menu accordeon, j’ai simplement caché les puces rondes par défaut de ces listes et j’ai également caché tous les .contenuTitre. Ce dernier point est essentiel pour le bon fonctionnement de votre menu accordéon.

Voici ce à quoi il ressemble :

Et avec un peu de CSS :

Quelle méthode choisir ?

Dans cet article vous avez vu deux manières de réaliser un menu accordéon. Les rendus sont les mêmes pour les deux. Ces techniques sont souples et pas ou peu restrictives.

Si vous êtes amateur et que vous travaillez pour votre projet personnel, nous vous conseillons d’utiliser la librairie jQuery UI qui reste la manière la plus simple d’intégrer ce genre de menu. Si au contraire vous êtes un peu plus aisé avec le JavaScript et que vous êtes curieux, utilisez plutôt la deuxième méthode qui sera à terme plus facile à faire évoluer.

Note : Rappelez-vous simplement que vous gagnerez en temps d’exécution avec la méthode jQuery car vous vous passerez totalement de la librairie jQuery UI. Même si cette dernière est bien faite et qu’elle peut être scindée et utilisée de manière ciblée (pour un ou plusieurs types d’animations bien précises…) cela reste tout de même des données supplémentaires à prendre en compte, et ça ne doit pas être négligé.

 

Une multitude de tutoriels aux effets différents

La communauté du web enrichit continuellement la toile avec des versions de plus en plus évoluées. Vous pouvez trouver une multitude de sites qui référencent des tutoriels (le plus souvent en Anglais) avec notamment la requête suivante : “Accordion jQuery“.
Il y en a pour tous les goûts, du simple menu horizontal aux véritables galeries animées, vous avez l’embarras du choix ! Il ne vous reste plus qu’à vous mettre au travail !

Créer un menu Accordéon avec jQuery, 4.5 out of 5 based on 2 ratings

Commentaires

#1
Skyzofraise

Bonjour =)

Merci pour ce tuto qui est réellement intéressant, j’ai plus ou moins compris comment marche chaque élément, seulement voilà j’ai une petite question pour rajouter un petit plus à mon nouveau menu accordéon.

J’aimerais savoir s’il est possible de faire en sorte que le menu, une fois déplié, puisse se replier et ne pas laisser la liste déroulée?

N’étant pas encore calée j’ai beau regardé les codes que proposent d’autres personnes je n’arrive pas à savoir comment intégrer la solution au code que vous proposez.
Malgré tout j’ai réussi à faire en sorte qu’en arrivant sur la page le menu soit fermé, mais une fois déplié impossible de le replier ._.”

Je vous remercie de votre patience ainsi que de ce tutoriel en tout cas,

Bonne journée!

Kévin Pinto

Bonjour,

Si j’ai bien saisi votre question, vous voudriez restreindre l’utilisation de votre menu accordéon pour une seule utilisation ?

#2
Nrf

Bonjour,

Très bon tuto, si je peux apporter ma contribution à la version sans UI, je dirais de remplacer les “a” (liens) par des span, ce qui permet d’avoir à éviter les preventDefault et même la surcharge css des règles des liens (soulignement, couleur..).

J’ai mis l’équivalent de la classe titre sur le li et pas son contenu, ce qui évite aussi le .parent()

Enfin, pour la petite touche finale, j’ai mis un scroll sur la fin sur slideToggle afin d’amener le visiteur sur le début du contenu nouvellement affiché :


$(this).next().stop(true,true).slideToggle('normal', function(){
// Scroll to current paragraph title
$('html, body').animate({scrollTop:$(this).offset().top-22}, 'slow');
});

Mes équivalents de “contenuTitre” pouvant être très longs ou très et donc positionner le contenu de la fenêtre n’importe où suivant le titre cliqué.

Voilou, bonne continuation.

#3
Stéphane Richard

C’est un excellent tutoriel, je préfère la deuxième méthode puisqu’elle n’utilise qu’une seule librairie Jquery! J’ai trouvé dommage que l’accordéon sur les super-héros contient quelques bugs d’affichage (on ne voit pas tout le texte lorsque l’on clique sur “Weaknesses”.
Dans l’ensemble c’est du très bon travail, continuez comme ça!
A bientôt.

#4
John

Sinon, avec une solution au marquage sémantique, ça donne quoi ?

Nan parce qu’une liste au contenu nested avec des classes, faut quand même avouer que c’est hyper dégueulasse… donc ça ne sert pas à grand-chose de faire du jQuery si la base HTML est souillée…

Kévin Pinto

Bonjour John,

Si notre HTML ne vous convient pas, vous pouvez aussi vous tourner vers la solution que propose Openclassrooms.

Un menu accordéon

Si c’est les balises heading manquantes dans nos exemples qui vous gène, rien ne vous empêche de les insérer. A vrai dire tous dépend du contexte dans lequel l’accordéon est construit. Et en ce sens l’implémentation des listes (balises type blocs) est totalement justifié.

#5
Clément

Bonjour,

merci pour ce tuto mais il ne fonctionne pas correctement (du moins pas comme sur votre exemple).
Lorsque ma page est charge, le contenu de chaque li (contenuTitre) est visible. Lorsque je clique sur le premier lien (titre), rien ne se ferme. Quand je clique sur le second lien cela fonctionne… je ne comprends pas pourquoi..

Réagissez à cet article

Données obligatoires