Basic pliable
Pliables sont utiles lorsque vous voulez cacher et montrer grande quantité de contenu:
Exemple
<button data-toggle="collapse"
data-target="#demo">Collapsible</button>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Essayez - le vous - même » Exemple Explained
La .collapse classe indique un élément pliable (un <div> dans notre exemple); c'est le contenu qui sera affiché ou masqué avec un clic d'un bouton.
Pour contrôler (afficher / masquer) le contenu pliable, ajouter les data-toggle="collapse" attribut à un <a> ou un <button> élément. Puis ajouter le data-target="#id" attribut pour connecter le bouton avec le contenu pliable (<div id="demo">) .
Remarque: Pour <a> éléments, vous pouvez utiliser le href attribut au lieu des data-target attribut:
Exemple
<a href="#demo" data-toggle="collapse">Collapsible</a>
<div id="demo"
class="collapse">
Lorem ipsum dolor text....
</div> Essayez - le vous - même » Par défaut, le contenu pliable est caché. Cependant, vous pouvez ajouter le .in classe pour afficher le contenu par défaut:
Exemple
<div id="demo"
class="collapse in">
Lorem ipsum dolor text....
</div> Essayez - le vous - même » Panneau réductible
L'exemple suivant montre un panneau pliable:
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> Essayez - le vous - même » Pliable Group Liste
- Un
- Deux
- Trois
Ce qui suit montre un panneau pliable avec un groupe de liste à 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> Essayez - le vous - même » Accordéon
L'exemple suivant montre simple accordéon en étendant le composant du panneau.
Remarque: Utilisez les data-parent attribut pour faire en sorte que tous les éléments pliables dans le cadre du parent spécifié seront fermés lorsque l' un de l'élément pliable est représenté.
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> Essayez - le vous - même » Complete Bootstrap Collapse Référence
Pour une référence complète de toutes les options, l' effondrement des méthodes et des événements, rendez - vous à notre Bootstrap Collapse Référence JS .