ComposantsJavaScript requis

Repli

Le repli affiche ou masque un bloc de contenu au clic sur un bouton, avec une animation de hauteur (ou de largeur). C’est la base de l’accordéon et de la barre de navigation repliable.

Repli de base#

Le bouton désigne le bloc à piloter avec data-bs-target (un sélecteur) ; le bloc porte collapse, et show s’il doit être ouvert au chargement. Sur un lien, href="#id" joue le même rôle que data-bs-target.

Lien qui déplie

Le tableau d'amortissement détaille chaque mensualité : capital remboursé, intérêts et capital restant dû.

Les frais de dossier sont prélevés une seule fois, au déblocage du prêt.

<p class="d-flex flex-wrap gap-2">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#rp-lien" role="button" aria-expanded="false" aria-controls="rp-lien">Lien qui déplie</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#rp-bouton" aria-expanded="false" aria-controls="rp-bouton">Bouton qui déplie</button>
</p>
<div class="collapse" id="rp-lien">
  <div class="card card-body mb-2">Le tableau d'amortissement détaille chaque mensualité : capital remboursé, intérêts et capital restant dû.</div>
</div>
<div class="collapse" id="rp-bouton">
  <div class="card card-body">Les frais de dossier sont prélevés une seule fois, au déblocage du prêt.</div>
</div>

Plusieurs cibles#

Un même bouton peut piloter plusieurs blocs avec un sélecteur de classe, et plusieurs boutons peuvent piloter un bloc. Pour un bouton qui contrôle plusieurs éléments, listez leurs identifiants dans aria-controls, séparés par des espaces.

Premier bloc

Conditions du compte courant.

Conditions du livret d'épargne.

<p class="d-flex flex-wrap gap-2">
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#rp-multi-1" role="button" aria-expanded="false" aria-controls="rp-multi-1">Premier bloc</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#rp-multi-2" aria-expanded="false" aria-controls="rp-multi-2">Second bloc</button>
  <button class="btn btn-outline-primary" type="button" data-bs-toggle="collapse" data-bs-target=".rp-multi" aria-expanded="false" aria-controls="rp-multi-1 rp-multi-2">Les deux</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse rp-multi" id="rp-multi-1">
      <div class="card card-body">Conditions du compte courant.</div>
    </div>
  </div>
  <div class="col">
    <div class="collapse rp-multi" id="rp-multi-2">
      <div class="card card-body">Conditions du livret d'épargne.</div>
    </div>
  </div>
</div>

Repli horizontal#

Ajoutez collapse-horizontal au bloc pour animer la largeur au lieu de la hauteur. Le bloc a besoin d’une largeur fixée, ici par un conteneur enveloppant et une carte de largeur donnée.

Ce panneau se déplie sur sa largeur et affiche vos dernières opérations.

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#rp-horizontal" aria-expanded="false" aria-controls="rp-horizontal">Afficher le panneau</button>
</p>
<div style="min-height: 7rem;">
  <div class="collapse collapse-horizontal" id="rp-horizontal">
    <div class="card card-body" style="width: 300px;">Ce panneau se déplie sur sa largeur et affiche vos dernières opérations.</div>
  </div>
</div>

Classes

Classes
Classe	Rôle
`collapse`	Masque le bloc.
`collapse.show`	Affiche le bloc.
`collapsing`	Ajoutée par le script pendant l’animation ; ne l’écrivez pas dans le HTML.
`collapse-horizontal`	Anime la largeur au lieu de la hauteur.
`collapsed`	Posée par le script sur les boutons dont le bloc est fermé.

Options JavaScript

Les options se posent en attributs data-bs-* ou dans l’objet de configuration passé au constructeur.

Options JavaScript
Option	Type	Défaut	Description
`parent`	sélecteur ou élément	`null`	Si renseigné, les autres panneaux de ce conteneur se referment à l’ouverture du panneau. Attribut : `data-bs-parent`.
`toggle`	booléen	`true`	Bascule le panneau dès la création de l’instance. Passez `{ toggle: false }` pour créer l’instance sans changer l’état du panneau.

Méthodes

Méthodes
Méthode	Description
`toggle()`	Ouvre le panneau s’il est fermé, le ferme sinon. Rend la main avant la fin de l’animation.
`show()`	Ouvre le panneau. Sans effet s’il est déjà ouvert ou en cours d’animation.
`hide()`	Ferme le panneau. Sans effet s’il est déjà fermé ou en cours d’animation.
`dispose()`	Détruit l’instance et libère les écouteurs.
`getInstance(element)`	Méthode statique : renvoie l’instance associée à l’élément, ou `null`.
`getOrCreateInstance(element, options)`	Méthode statique : renvoie l’instance existante ou en crée une.

Événements

Ils sont émis sur le bloc replié, pas sur le bouton.

Événements
Événement	Description
`show.bs.collapse`	Au début de l’ouverture. `preventDefault()` annule l’ouverture.
`shown.bs.collapse`	Quand le panneau est entièrement ouvert, animation terminée.
`hide.bs.collapse`	Au début de la fermeture. `preventDefault()` annule la fermeture.
`hidden.bs.collapse`	Quand le panneau est entièrement fermé, animation terminée.

Attributs data-bs

Attributs data-bs
Attribut	Où le poser	Rôle
`data-bs-toggle="collapse"`	Bouton ou lien	Active le comportement de repli.
`data-bs-target`	Bouton	Sélecteur des blocs à piloter (un identifiant ou une classe).
`href="#id"`	Lien	Équivalent de `data-bs-target` pour un `a`.
`data-bs-parent`	Bloc	Sélecteur d’un conteneur : un seul bloc à la fois y reste ouvert.
`aria-expanded`	Bouton	`true` si le bloc est ouvert, `false` sinon ; le script le met à jour.
`aria-controls`	Bouton	Identifiant(s) du ou des blocs pilotés.

Variables Sass

Le repli n’a pas d’apparence propre : seules les transitions se configurent.

Variables Sass
Variable	Défaut	Rôle
`$transition-collapse`	`height .35s ease`	Animation d’ouverture et de fermeture en hauteur.
`$transition-collapse-width`	`width .35s ease`	Animation du repli horizontal.

Personnalisation#

// Global : avant l'import de Cauri
$transition-collapse: height 0.25s ease-in-out;
$transition-collapse-width: width 0.25s ease-in-out;

// Local : un repli plus lent
.repli-lent.collapsing {
  transition-duration: 0.6s;
}

Utilisation en JavaScript#

Attention : new bootstrap.Collapse(element) bascule le bloc dès sa création. Passez { toggle: false } pour créer l’instance sans changer son état.

const bloc = document.querySelector('#rp-bouton');
const repli = new bootstrap.Collapse(bloc, { toggle: false });

bloc.addEventListener('hidden.bs.collapse', () => {
  console.log('Bloc refermé');
});

repli.show();

Bonnes pratiques

À faire

Utilisez le repli pour un contenu secondaire que l’utilisateur choisit de consulter.
Écrivez un libellé de bouton qui annonce ce qui se déplie (« Voir le détail des frais »).
Pour une série de rubriques, préférez l'accordéon.
Gardez aria-expanded aligné avec l’état initial du bloc (true si show est présent).

À éviter

Ne cachez pas dans un repli une information indispensable à la compréhension de la page.
N’animez pas un bloc qui contient un contenu très long : la page saute pendant l’animation.
N’oubliez pas { toggle: false } en créant une instance en JavaScript si vous ne voulez pas basculer le bloc.

Accessibilité

Pilotez le bloc avec un vrai button (ou un lien avec role="button"), jamais avec une balise sans rôle.
aria-expanded et aria-controls sont indispensables ; le script met à jour aria-expanded.
Un bloc replié est masqué aux technologies d’assistance : n’y mettez pas de contenu à annoncer.
Au clavier, Entrée ou Espace active le bouton ; l’animation est supprimée pour qui demande moins d’animations.