Accordéon
Bloc repliable pour organiser des réponses détaillées sans surcharger la page ; un groupe exclusif limite à une section ouverte à la fois.
Accordéon simple
Contenu de l’accordéon. Peut contenir du texte, des listes, des images ou tout autre contenu HTML.
<div class="bj-accordion">
<button class="bj-accordion__btn" data-bj-accordion-btn aria-expanded="true" aria-controls="acc-body">Titre de l'accordéon</button>
<div id="acc-body" class="bj-accordion__body" data-bj-expanded><p>Contenu de l'accordéon. Peut contenir du texte, des listes, des images ou tout autre contenu HTML.</p></div>
</div>Groupe exclusif
Placez plusieurs accordéons dans un élément porteur de data-bj-accordion-group : l’ouverture d’un panneau referme les autres. La classe bj-accordions encadre visuellement la liste.
Connectez-vous au portail du service concerné avec votre compte citoyen, complétez le formulaire et joignez une copie de votre pièce d’identité. Le document signé peut être retiré en guichet ou reçu par voie électronique selon les options proposées.
Les tarifs en vigueur sont affichés sur le site du ministère et peuvent varier selon la durée de validité et l’urgence. Le paiement s’effectue aux guichets habilités ou via les canaux indiqués lors de la prise de rendez-vous.
Après dépôt, un numéro de suivi vous est communiqué. Saisissez-le dans la rubrique « Mes démarches » du portail national ou contactez la mairie ou l’officier d’état civil compétent en indiquant ce numéro.
<div class="bj-accordions" data-bj-accordion-group>
<div class="bj-accordion">
<button type="button" class="bj-accordion__btn" id="btn-grp1" data-bj-accordion-btn aria-expanded="false" aria-controls="grp1">Question 1</button>
<div id="grp1" class="bj-accordion__body" role="region" aria-labelledby="btn-grp1"><p>Réponse 1…</p></div>
</div>
<div class="bj-accordion">…</div>
</div>Groupe avec premier panneau ouvert
Combinez bj-accordion--expanded sur l’item initialement déployé avec data-bj-expanded sur le panneau : le script conserve le comportement exclusif tout en affichant une réponse par défaut.
Contenu masqué jusqu’au clic.
<div class="bj-accordions" data-bj-accordion-group>
<div class="bj-accordion bj-accordion--expanded">
<button type="button" class="bj-accordion__btn" data-bj-accordion-btn aria-expanded="true" aria-controls="g1">Déployé par défaut</button>
<div id="g1" class="bj-accordion__body" data-bj-expanded role="region">…</div>
</div>
<div class="bj-accordion">
<button type="button" class="bj-accordion__btn" data-bj-accordion-btn aria-expanded="false" aria-controls="g2">Fermé</button>
<div id="g2" class="bj-accordion__body" role="region">…</div>
</div>
</div>État ouvert sans script
Sans JavaScript, ajoutez la classe modificateur sur l’item et laissez le panneau ouvert avec data-bj-expanded .
<div class="bj-accordion bj-accordion--expanded">
<button type="button" id="btn-static" class="bj-accordion__btn" aria-expanded="true" aria-controls="acc-static">Titre</button>
<div id="acc-static" class="bj-accordion__body" data-bj-expanded role="region" aria-labelledby="btn-static">
<p>Contenu visible sans script.</p>
</div>
</div>Classes CSS
| Classe / attribut | Description |
|---|---|
bj-accordions | Conteneur de liste (bordure, rayons) - optionnel mais recommandé pour un groupe. |
bj-accordion | Élément d’accordéon (une paire bouton + panneau). |
bj-accordion__btn + data-bj-accordion-btn | Bouton d’en-tête ; aria-expanded et aria-controls sont requis. |
bj-accordion__body | Panneau de contenu ; ouvert si data-bj-expanded est présent (mis à jour par le script). |
data-bj-accordion-group | Comportement exclusif : un seul panneau ouvert à la fois dans le groupe. |
bj-accordion--expanded | Variante statique possible sur l’item (sans script). |
Accessibilité
aria-expanded et pointer vers le panneau via aria-controls et un id unique sur le corps. Les touches Entrée et Espace activent le bouton natif et basculent l’accordéon. Pour les groupes, un role="region" sur le panneau avec aria-labelledby vers le bouton améliore l’annonce dans les lecteurs d’écran.