Effondrement

Comment ça fonctionne

Le plugin JavaScript d'effondrement est utilisé pour afficher et masquer le contenu. Les boutons ou les ancres sont utilisés comme déclencheurs qui sont mappés à des éléments spécifiques que vous basculez. Réduire un élément animera le heightde sa valeur actuelle à 0. Étant donné la façon dont CSS gère les animations, vous ne pouvez pas les utiliser paddingsur un .collapseélément. Utilisez plutôt la classe comme élément d'habillage indépendant.

Exemple

Cliquez sur les boutons ci-dessous pour afficher et masquer un autre élément via les changements de classe :

• .collapsemasque le contenu
• .collapsingest appliqué pendant les transitions
• .collapse.showaffiche le contenu

Généralement, nous recommandons d'utiliser un bouton avec l' data-bs-targetattribut . Bien que non recommandé d'un point de vue sémantique, vous pouvez également utiliser un lien avec l' hrefattribut (et un role="button"). Dans les deux cas, le data-bs-toggle="collapse"est obligatoire.

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>

Horizontal

Le plugin d'effondrement prend également en charge l'effondrement horizontal. Ajoutez la .collapse-horizontalclasse de modificateur pour faire la transition au widthlieu de heightet définissez a widthsur l'élément enfant immédiat. N'hésitez pas à écrire votre propre Sass personnalisé, à utiliser des styles en ligne ou à utiliser nos utilitaires de largeur .

<p>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
    Toggle width collapse
  </button>
</p>
<div style="min-height: 120px;">
  <div class="collapse collapse-horizontal" id="collapseWidthExample">
    <div class="card card-body" style="width: 300px;">
      This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
    </div>
  </div>
</div>

Cibles multiples

Un <button>ou <a>peut afficher et masquer plusieurs éléments en les référençant avec un sélecteur dans son attribut hrefou . data-bs-targetPlusieurs <button>ou <a>peuvent afficher et masquer un élément s'ils le référencent chacun avec leur attribut hrefoudata-bs-target

<p>
  <a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2">Toggle both elements</button>
</p>
<div class="row">
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample1">
      <div class="card card-body">
        Some placeholder content for the first collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Some placeholder content for the second collapse component of this multi-collapse example. This panel is hidden by default but revealed when the user activates the relevant trigger.
      </div>
    </div>
  </div>
</div>

Accessibilité

Assurez-vous d'ajouter aria-expandedà l'élément de contrôle. Cet attribut transmet explicitement l'état actuel de l'élément pliable lié au contrôle des lecteurs d'écran et des technologies d'assistance similaires. Si l'élément réductible est fermé par défaut, l'attribut de l'élément de contrôle doit avoir la valeur aria-expanded="false". Si vous avez défini l'élément pliable pour qu'il soit ouvert par défaut à l'aide de la showclasse, définissez aria-expanded="true"-le plutôt sur le contrôle. Le plugin basculera automatiquement cet attribut sur le contrôle selon que l'élément pliable a été ouvert ou fermé (via JavaScript, ou parce que l'utilisateur a déclenché un autre élément de contrôle également lié au même élément pliable). Si l'élément HTML de l'élément de contrôle n'est pas un bouton (par exemple, un <a>ou <div>), l'attributrole="button"doit être ajouté à l'élément.

Si votre élément de contrôle cible un seul élément pliable - c'est-à-dire que l' data-bs-targetattribut pointe vers un idsélecteur - vous devez ajouter l' aria-controlsattribut à l'élément de contrôle, contenant le idde l'élément pliable. Les lecteurs d'écran modernes et les technologies d'assistance similaires utilisent cet attribut pour fournir aux utilisateurs des raccourcis supplémentaires pour accéder directement à l'élément pliable lui-même.

Notez que l'implémentation actuelle de Bootstrap ne couvre pas les diverses interactions clavier facultatives décrites dans le modèle d'accordéon ARIA Authoring Practices Guide - vous devrez les inclure vous-même avec JavaScript personnalisé.

Toupet

variables

$transition-collapse:         height .35s ease;
$transition-collapse-width:   width .35s ease;

Des classes

Les classes de transition Collapse peuvent être trouvées dans scss/_transitions.scsscar elles sont partagées entre plusieurs composants (collapse et accordéon).

.collapse {
  &:not(.show) {
    display: none;
  }
}

.collapsing {
  height: 0;
  overflow: hidden;
  @include transition($transition-collapse);

  &.collapse-horizontal {
    width: 0;
    height: auto;
    @include transition($transition-collapse-width);
  }
}

Usage

Le plugin d'effondrement utilise quelques classes pour gérer le gros du travail :

• .collapsecache le contenu
• .collapse.showaffiche le contenu
• .collapsingest ajouté lorsque la transition démarre et supprimé lorsqu'elle se termine

Ces cours se trouvent dans _transitions.scss.

Via les attributs de données

Ajoutez simplement data-bs-toggle="collapse"et data-bs-targetà l'élément pour attribuer automatiquement le contrôle d'un ou plusieurs éléments pliables. L' data-bs-targetattribut accepte un sélecteur CSS auquel appliquer le repli. Assurez-vous d'ajouter la classe collapseà l'élément réductible. Si vous souhaitez qu'il soit ouvert par défaut, ajoutez la classe supplémentaire show.

Pour ajouter une gestion de groupe en accordéon à une zone réductible, ajoutez l'attribut data data-bs-parent="#selector". Reportez-vous à la page accordéon pour plus d'informations.

Via Javascript

Activer manuellement avec :

const collapseElementList = document.querySelectorAll('.collapse')
const collapseList = [...collapseElementList].map(collapseEl => new bootstrap.Collapse(collapseEl))

Choix

Comme les options peuvent être transmises via des attributs de données ou JavaScript, vous pouvez ajouter un nom d'option à data-bs-, comme dans data-bs-animation="{value}". Assurez-vous de changer le type de casse du nom de l'option de " camelCase " à " kebab-case " lors du passage des options via les attributs de données. Par exemple, utilisez à la data-bs-custom-class="beautifier"place de data-bs-customClass="beautifier".

Depuis Bootstrap 5.2.0, tous les composants prennent en charge un attribut de données expérimentaldata-bs-config réservé pouvant héberger une configuration de composant simple sous forme de chaîne JSON. Lorsqu'un élément a des attributs data-bs-config='{"delay":0, "title":123}'et , la valeur finale sera et les attributs de données séparés remplaceront les valeurs données sur . De plus, les attributs de données existants peuvent héberger des valeurs JSON telles que .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Méthodes

Active votre contenu en tant qu'élément pliable. Accepte une option facultative object.

Vous pouvez créer une instance de repli avec le constructeur, par exemple :

const bsCollapse = new bootstrap.Collapse('#myCollapse', {
  toggle: false
})

Événements

La classe d'effondrement de Bootstrap expose quelques événements pour se connecter à la fonctionnalité d'effondrement.

const myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', event => {
  // do something...
})