Bootstrap 4 Effondrement
Basique Pliable
Les éléments pliables sont utiles lorsque vous souhaitez masquer et afficher une grande quantité de contenu :
Exemple
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Exemple expliqué
La .collapseclasse indique un élément réductible (un <div> dans notre exemple) ; c'est le contenu qui sera affiché ou masqué d'un simple clic sur un bouton.
Pour contrôler (afficher/masquer) le contenu réductible, ajoutez l' data-toggle="collapse"attribut à un élément <a> ou <button>. Ajoutez ensuite l' data-target="#id"attribut pour connecter le bouton avec le contenu pliable (<div id="demo">).
Remarque : Pour les éléments <a>, vous pouvez utiliser l' hrefattribut au lieu de l' data-target
attribut :
Exemple
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
Par défaut, le contenu réductible est masqué. Cependant, vous pouvez ajouter la .showclasse pour afficher le contenu par défaut :
Exemple
<div id="demo" class="collapse show">
Lorem ipsum dolor text....
</div>
Accordéon
L'exemple suivant montre un accordéon simple en étendant le composant card.
Remarque : utilisez l' data-parentattribut pour vous assurer que tous les éléments réductibles sous le parent spécifié seront fermés lorsque l'un des éléments réductibles est affiché.
Exemple
<div id="accordion">
<div class="card">
<div
class="card-header">
<a class="card-link"
data-toggle="collapse" href="#collapseOne">
Collapsible
Group Item #1
</a>
</div>
<div id="collapseOne" class="collapse show"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseTwo">
Collapsible
Group Item #2
</a>
</div>
<div id="collapseTwo" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
<div class="card">
<div
class="card-header">
<a class="collapsed card-link"
data-toggle="collapse" href="#collapseThree">
Collapsible
Group Item #3
</a>
</div>
<div id="collapseThree" class="collapse"
data-parent="#accordion">
<div class="card-body">
Lorem
ipsum..
</div>
</div>
</div>
</div>
Référence complète de l'effondrement de Bootstrap 4
Pour une référence complète de toutes les options, méthodes et événements de repli, accédez à notre Bootstrap 4 JS Collapse Reference .