Sommaire

Les accordéons PLUGINS JAVASCRIPT:Accordéons

1. L’objectif

Les accordéons sont nommés collapses dans la terminologie de Bootstrap. Cela va permettre d’afficher des informations supplémentaires par un clic de l’utilisateur sur le titre d’un « volet » de l’accordéon.

Là encore, cela nous permet de gagner de la place dans nos pages Web pour n’afficher l’information que lorsque le visiteur le voudra.

Retrouvez cet exemple dans le fichier Bootstrap-08-JavaScript/04-accordeon.html.

2. L’accordéon

Un accordéon est composé de plusieurs « volets » qui peuvent s’ouvrir et se fermer par les clics des utilisateurs sur le titre.

Un accordéon est composé de plusieurs boîtes <div> imbriquées, dont voici la structure générale :

images/C14-009.png

La boîte <div> racine, <div class="panel-group" id="accordeon">, utilise la classe Bootstrap .panel-group pour sa mise en forme. Elle possède un identifiant id unique : accordeon dans cet exemple.

Chaque volet est une boîte <div class="panel panel-default"> qui utilise des classes Bootstrap pour la mise en forme.

Chaque volet possède un en-tête : <div class="panel-heading"> qui utilise une classe Bootstrap pour la mise en forme.

Le titre du volet est placé dans cet en-tête, dans un élément <h4> dans cet exemple. Le titre ...