Effondrement de Bootstrap JS
Collapse JS (collapse.js)
Obtenez des styles de base et une prise en charge flexible des composants pliables tels que les accordéons et la navigation.
Dépendance du plugin : Collapse nécessite que le plugin de transitions soit inclus dans votre version de Bootstrap.
Pour un didacticiel sur les éléments pliables, lisez notre didacticiel Bootstrap Collapse .
Les classes du plugin Collapse
| Class | Description | Example |
|---|---|---|
| .collapse | Hides the content | |
| .collapse in | Shows the content | |
| .collapsing | Added when the transition starts, and removed when it finishes |
Via data-* Attributs
Ajoutez simplement data-toggle="collapse" et une cible de données à l'élément pour attribuer automatiquement le contrôle d'un élément réductible. L'attribut data-target 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 s'ouvre par défaut, ajoutez la classe supplémentaire dans.
Exemple
<button class="btn" data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Some text..
</div>
Conseil : Pour ajouter une gestion de groupe en accordéon à un contrôle réductible, ajoutez l'attribut de données data-parent="#selector".
Via Javascript
Activer manuellement avec :
$('.collapse').collapse()
Options de réduction
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="".
| Name | Type | Default | Description |
|---|---|---|---|
| parent | selector | false | All collapsible elements under the specified parent will be closed when this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the panel class) - See example below |
| toggle | boolean | true | Toggles the collapsible element on invocation |
Méthodes de réduction
Le tableau suivant répertorie toutes les méthodes de réduction disponibles.
| Method | Description | Try it |
|---|---|---|
| .collapse(options) | Activates the collapsible element with an option. See options above for valid values | |
| .collapse("toggle") | Toggles the collapsible element | |
| .collapse("show") | Shows the collapsible element | |
| .collapse("hide") | Hides the collapsible element |
Réduire les événements
Le tableau suivant répertorie tous les événements de repli disponibles.
| Event | Description | Try it |
|---|---|---|
| show.bs.collapse | Occurs when the collapsible element is about to be shown | |
| shown.bs.collapse | Occurs when the collapsible element is fully shown (after CSS transitions have completed) | |
| hide.bs.collapse | Occurs when the collapsible element is about to be hidden | |
| hidden.bs.collapse | Occurs when the collapsible element is fully hidden (after CSS transitions have completed) |
Plus d'exemples
Pliable simple
L'exemple suivant permet à un bouton de basculer entre l'expansion et la réduction 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>
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
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 panel :
Remarque : L' data-parentattribut garantit 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>
Développer et réduire l'icône et le texte à bascule
L'exemple suivant modifie le texte et l'icône d'ouverture/fermeture lors de l'ouverture et de la fermeture du contenu réductible :
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');
});
});
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";
}