Effondrement du bootstrap
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 .inclasse pour afficher le contenu par défaut :
Exemple
<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>
Panneau pliable
L'exemple suivant montre un panneau réductible :
Exemple
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Groupe de liste réductible
- One
- Two
- Three
L'exemple suivant montre un panneau réductible avec un groupe de listes à l'intérieur :
Exemple
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible list group</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<ul class="list-group">
<li class="list-group-item">One</li>
<li class="list-group-item">Two</li>
<li class="list-group-item">Three</li>
</ul>
<div class="panel-footer">Footer</div>
</div>
</div>
</div>
Accordéon
L'exemple suivant montre un accordéon simple en étendant le composant de panneau.
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 class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.</div>
</div>
</div>
</div>
Référence complète de l'effondrement de Bootstrap
Pour une référence complète de toutes les options, méthodes et événements de repli, consultez notre Bootstrap JS Collapse Reference .