Les accordéons

Ce billet relate les éléments essentiels permettant la réalisation grâce à la bibliothèque Jquery UI d'un menu en accordéon. Il s'appuie sur la documentation  officielle consultable ici.

Cet exemple s'appuie sur 2 fichiers qui s'exécutent côté client : index.html et index.js

A tester en direct

Section 1

je m' affiche dans la section 1

Section 2

je m' affiche dans la section 2

Section 3

je m' affiche dans la section 3

Le fichier index.html produit l'affichage ci-contre.
Dans l' entête s'effectue la liaison avec les "bibliothèques" CSS '(thême Cupertino)  et javascript ( jquery.js , jqueryui.js), ainsi que le lien avec notre script index.js.

Le script "index.js", détaillé ci-dessus, se contente d'appeler la méthode accordion() de la bibliothèque jquery-ui. Dans ce script, cette méthode s'applique sur la balise div identifiée "menu" qui a été définie dans le fichier index.html (<div id="menu"> </div>).


Mots Clé