pinterest linkedin behance copy

Collapse

Basculez la visibilité du contenu dans votre projet avec quelques classes et nos plugins JavaScript.

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 height de sa valeur actuelle à 0. Étant donné la façon dont CSS gère les animations, vous ne pouvez pas les utiliser padding sur un .collapse élément. Utilisez plutôt la classe comme élément d'habillage indépendant.

L'effet d'animation de ce composant dépend de la prefers-reduced-motion media query. Voir la section mouvement réduit de notre documentation sur l'accessibilité.

Exemple

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

  • .collapse masque le contenu
  • .collapsing est appliqué pendant les transitions
  • .collapse.show ffiche le contenu

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

Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
<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>

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 href ou data-bs-target. Plusieurs <button> ou <a> peuvent afficher et masquer un élément s'ils le référencent chacun avec leur attribut href ou data-bs-target attribut

Du contenu d'espace réservé pour le premier composant de repli de cet exemple de replis multiples. Ce panneau est masqué par défaut mais révélé lorsque l'utilisateur active le déclencheur correspondant.
Du contenu d'espace réservé pour le deuxième composant de repli de cet exemple de replis multiples. Ce panneau est masqué par défaut mais révélé lorsque l'utilisateur active le déclencheur correspondant.
<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 show classe, 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'attribut role="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-target attribut pointe vers un id sélecteur - vous devez ajouter l' aria-controls attribut à l'élément de contrôle, contenant le id de 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 dans le keyboard interactions described in the modèle d'accordéon WAI-ARIA Authoring Practices 1.1 - vous devrez les inclure vous-même avec JavaScript personnalisé.

Sass

Variables

$transition-collapse:         height .35s ease;

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);
}

Utilisation

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

  • .collapse cache le contenu
  • .collapse.show montre le contenu
  • .collapsing est ajouté lorsque la transition démarre et supprimé lorsqu'elle se termine

Ces classes 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-target attribut 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.

Via JavaScript

Activer manuellement avec :

var collapseElementList = [].slice.call(document.querySelectorAll('.collapse'))
var collapseList = collapseElementList.map(function (collapseEl) {
  return new bootstrap.Collapse(collapseEl)
})

Options

Les options peuvent être transmises via des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l'option à data-bs-, comme dans data-bs-parent="".

Nom Type Défaut Description
parent selector | jQuery object | DOM element false Si le parent est fourni, tous les éléments réductibles sous le parent spécifié seront fermés lorsque cet élément réductible est affiché. (similaire au comportement traditionnel de l'accordéon - cela dépend de la card classe). L'attribut doit être défini sur la zone réductible cible.
toggle boolean true Bascule l'élément réductible à l'appel

Méthodes

Méthodes et transitions asynchrones

Toutes les méthodes API sont asynchrones et démarrent une transition . Ils reviennent à l'appelant dès que la transition est commencée mais avant qu'elle ne se termine . De plus, un appel de méthode sur un composant en transition sera ignoré.

Consultez notre documentation JavaScript pour plus d'informations.

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 :

var myCollapse = document.getElementById('myCollapse')
var bsCollapse = new bootstrap.Collapse(myCollapse, {
  toggle: false
})
Méthode Description
toggle Bascule un élément réductible sur affiché ou masqué. Renvoie à l'appelant avant que l'élément réductible n'ait été réellement affiché ou masqué (c'est-à-dire avant que l' événement shown.bs.collapse ou hidden.bs.collapse se produise).
show Affiche un élément réductible. Renvoie à l'appelant avant que l'élément réductible n'ait été réellement affiché (par exemple, avant que l' shown.bs.collapse évènement ne se produise).
hide Masque un élément pliable. Renvoie à l'appelant avant que l'élément réductible n'ait été masqué (par exemple, avant que l' hidden.bs.collapse évènement ne se produise).
dispose Détruit l'effondrement d'un élément. (Supprime les données stockées sur l'élément DOM)
getInstance Méthode statique qui permet d'obtenir l'instance de repli associée à un élément DOM, vous pouvez l'utiliser comme ceci : bootstrap.Collapse.getInstance(element)
getOrCreateInstance Méthode statique qui renvoie une instance de repli associée à un élément DOM ou en crée une nouvelle au cas où elle n'aurait pas été initialisée. Vous pouvez l'utiliser comme ceci bootstrap.Collapse.getOrCreateInstance(element)

Evènements

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

Type d'événement Description
show.bs.collapse Cet événement se déclenche immédiatement lorsque la show méthode d'instance est appelée.
shown.bs.collapse Cet événement est déclenché lorsqu'un élément de repli a été rendu visible à l'utilisateur (il attendra que les transitions CSS soient terminées).
hide.bs.collapse Cet événement est déclenché immédiatement lorsque la hide méthode a été appelée.
hidden.bs.collapse Cet événement est déclenché lorsqu'un élément de repli a été masqué à l'utilisateur (il attendra que les transitions CSS soient terminées).
var myCollapsible = document.getElementById('myCollapsible')
myCollapsible.addEventListener('hidden.bs.collapse', function () {
  // do something...
})

© 2010-2024 QZYcodes by Quazerty.