JS Collapse (collapse.js)
Obtenez styles de base et support flexible pour les composants pliables comme accordéons et navigation.
dépendance Plugin: Réduire exige que les transitions des plugins à inclure dans votre version de Bootstrap.
Pour un tutoriel sur pliables, lisez notre Bootstrap Collapse Tutorial .
The Collapse Plugin Classes
| Classe | La description | Exemple |
|---|---|---|
| .collapse | Masque le contenu | Essayez - le |
| .collapse in | Affiche le contenu | Essayez - le |
| .collapsing | Ajouté lorsque la transition commence, et enlevé quand il se termine | Essayez - le |
Via data-* Attributs
Il suffit d' ajouter des data-toggle="collapse" et une banque de données cible à l' élément pour attribuer automatiquement le contrôle d'un élément pliable. L'attribut de données cible accepte un sélecteur CSS pour appliquer l'effondrement à. Soyez sûr d'ajouter l'effondrement de la classe à l'élément pliable. Si vous souhaitez à un défaut ouvert, ajouter la classe supplémentaire.
Exemple
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Essayez - le vous - même » Conseil: Pour ajouter la gestion de groupe accordéon à un contrôle pliable, ajouter les données d' attribut de data-parent="#selector" .
Via JavaScript
Activer manuellement:
$('.collapse').collapse()Options Collapse
Les options peuvent être transmises par l'intermédiaire des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l' option pour de données, comme dans les data-parent="" .
| prénom | Type | Défaut | La description |
|---|---|---|---|
| parent | selector | false | Tous les éléments pliables dans le cadre du parent spécifié seront fermés lorsque cet élément pliable est représenté. (Similaire au comportement de l'accordéon traditionnel - cela dépend de la classe du panneau) - Voir exemple ci-dessous |
| toggle | boolean | true | Bascule l'élément pliable sur l'invocation |
Méthodes Réduire
Le tableau suivant répertorie les méthodes d'effondrement tous disponibles.
| méthode | La description | Essayez-le |
|---|---|---|
| .collapse( options ) | Active l'élément pliable avec une option. Voir options ci-dessus pour les valeurs valides | |
| .collapse("toggle") | Inverse l'élément pliable | Essayez - le |
| .collapse("show") | Affiche l'élément pliable | Essayez - le |
| .collapse("hide") | Masque l'élément pliable | Essayez - le |
Réduire Événements
Le tableau suivant répertorie les événements d'effondrement tous disponibles.
| un événement | La description | Essayez-le |
|---|---|---|
| show.bs.collapse | Survient lorsque l'élément pliable est sur le point d'être montré | Essayez - le |
| shown.bs.collapse | Survient lorsque l'élément pliable est entièrement représenté (après les transitions CSS ont terminé) | Essayez - le |
| hide.bs.collapse | Survient lorsque l'élément pliable est sur le point d'être caché | Essayez - le |
| hidden.bs.collapse | Survient lorsque l'élément pliable est entièrement caché (après les transitions CSS ont terminé) | Essayez - le |
Exemples
pliable simple
L'exemple suivant fait une touche basculer l'expansion et l'effondrement du contenu d'un autre élément:
Exemple
<button type="button" class="btn btn-info" data-toggle="collapse"
data-target="#demo">
Simple collapsible
</button>
<div id="demo"
class="collapse in">
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> 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
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: Le data-parent attribut fait 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 » Développer et Réduire Basculer Icône et texte
L'exemple suivant modifie le texte d'ouverture / fermeture et de l'icône lors de l'ouverture et la fermeture du contenu pliable:
Exemple
$(document).ready(function(){
$("#demo").on("hide.bs.collapse",
function(){
$(".btn").html('<span class="glyphicon
glyphicon-collapse-down"></span> Open');
});
$("#demo").on("show.bs.collapse", function(){
$(".btn").html('<span
class="glyphicon glyphicon-collapse-up"></span> Close');
});
}); Essayez - le vous - même » Ou vous pouvez utiliser CSS:
Exemple
/* Icon when the collapsible content is shown */
.btn:after {
font-family: "Glyphicons Halflings";
content: "\e114";
}
/* Icon when the collapsible content
is hidden */
.btn.collapsed:after {
content: "\e080";
} Essayez - le vous - même »