Effondrement
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.
prefers-reduced-motion
requête multimédia. 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
affiche le contenu
Généralement, nous recommandons d'utiliser un bouton avec l' data-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-toggle="collapse"
est obligatoire.
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-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 .width
classe de modificateur pour faire la transition au width
lieu de height
et définissez a width
sur 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 .
min-height
ensemble pour éviter les repeints excessifs dans nos documents, cela n'est pas explicitement requis.
Seul l' width
élément sur l'enfant est requis.
<p>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample">
Toggle width collapse
</button>
</p>
<div style="min-height: 120px;">
<div class="collapse width" id="collapseWidthExample">
<div class="card card-body" style="width: 320px;">
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 JQuery dans son attribut href
ou . data-target
Plusieurs <button>
ou <a>
peuvent afficher et masquer un élément s'ils le référencent chacun avec leur attribut href
oudata-target
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-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>
Exemple d'accordéon
À l'aide du composant de carte , vous pouvez étendre le comportement de réduction par défaut pour créer un accordéon. Pour obtenir correctement le style accordéon, assurez-vous de l'utiliser .accordion
comme emballage.
.show
classe.
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Collapsible Group Item #1
</button>
</h2>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Collapsible Group Item #2
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
Some placeholder content for the second accordion panel. This panel is hidden by default.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Collapsible Group Item #3
</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
</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'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-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 au clavier décrites dans le modèle d'accordéon ARIA Authoring Practices Guide - vous devrez les inclure vous-même avec JavaScript personnalisé.
Usage
Le plugin d'effondrement utilise quelques classes pour gérer le gros du travail :
.collapse
cache le contenu.collapse.show
affiche le contenu.collapsing
est 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-toggle="collapse"
et data-target
à l'élément pour attribuer automatiquement le contrôle d'un ou plusieurs éléments pliables. L' data-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-parent="#selector"
. Reportez-vous à la démo pour voir cela en action.
Via Javascript
Activer manuellement avec :
$('.collapse').collapse()
Choix
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-
, comme dans data-parent=""
.
Nom | Taper | Défaut | La description |
---|---|---|---|
parent | sélecteur | Objet jQuery | élément DOM | faux | 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. |
basculer | booléen | vrai | 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 .
.collapse(options)
Active votre contenu en tant qu'élément pliable. Accepte une option facultative object
.
$('#myCollapsible').collapse({
toggle: false
})
.collapse('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 ne hidden.bs.collapse
se produise).
.collapse('show')
Affiche un élément réductible. Renvoie à l'appelant avant que l'élément réductible n'ait été réellement affiché (c'est-à-dire avant que l' shown.bs.collapse
événement ne se produise).
.collapse('hide')
Masque un élément pliable. Renvoie à l'appelant avant que l'élément réductible ait été masqué (c'est-à-dire avant que l' hidden.bs.collapse
événement ne se produise).
.collapse('dispose')
Détruit l'effondrement d'un élément.
Événements
La classe d'effondrement de Bootstrap expose quelques événements pour se connecter à la fonctionnalité d'effondrement.
Type d'événement | La description |
---|---|
show.bs.collapse | Cet événement se déclenche immédiatement lorsque la show méthode d'instance est appelée. |
montré.bs.réduire | 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. |
caché.bs.effondrement | 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). |
$('#myCollapsible').on('hidden.bs.collapse', function () {
// do something...
})