Source

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 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

Vous pouvez utiliser un lien avec l' hrefattribut, ou un bouton avec l' data-targetattribut. Dans les deux cas, le data-toggle="collapse"est obligatoire.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </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 hrefou . data-targetPlusieurs <button>ou <a>peuvent afficher et masquer un élément s'ils le référencent chacun avec leur attribut hrefoudata-target

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. 
<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">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </div>
    </div>
  </div>
  <div class="col">
    <div class="collapse multi-collapse" id="multiCollapseExample2">
      <div class="card card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
      </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.

Anim pariatur cliché reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, brunch dolor skateboard non cupidatat. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 loup moon tempor, sunt aliqua mettre un oiseau dessus calmar café d'origine unique nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, bière artisanale labore wes anderson cred nesciunt sapiente ea proident. Annonce vegan excepteur boucher vice lomo. Leggings occaecat bière artisanale de la ferme à la table, synthé esthétique denim brut dont vous n'avez probablement pas entendu parler accusamus labore VHS durable.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </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 en fonction de l'ouverture ou de la fermeture de l'élément pliable (via JavaScript, ou parce que l'utilisateur a déclenché un autre élément de contrôle également lié au même élément collapsbile). 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-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 décrites dans le modèle d'accordéon WAI-ARIA Authoring Practices 1.1 - 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 :

  • .collapsecache le contenu
  • .collapse.showmontre 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-toggle="collapse"et data-targetà l'élément pour attribuer automatiquement le contrôle d'un ou plusieurs éléments pliables. L' data-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-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 cardclasse). 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.collapseou ne hidden.bs.collapsese 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 n'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 showmé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 hidemé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…
})