15

Menus en accordéon

Tout comme les onglets, les menus en accordéon regroupent, sur une même page HTML, les informations dans des blocs qui sont affichés ou cachés selon le menu sélectionné. La notion d’accordéon tient au fait que, lorsqu’un bloc est visible, il cache les autres blocs, avec une animation qui fait penser à un mouvement d’accordéon.

Principe de base

Supposons qu’on veuille écrire le code HTML permettant d’afficher les menus en accordéon représentés sur la figure 15-1. Nous avons trois barres de menu, chacune ayant un contenu différent.

jQuery UI demande d’écrire ceci de la façon suivante, pour chacun des menus, les uns à la suite des autres (les éléments de titre et de contenu se répétant les uns à la suite des autres) :

Get jQuery 1.7 et jQuery UI now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.