Bootstrap Collapse
Description
Dans ce tutoriel, vous apprendrez à créer des composants réductibles avec Bootstrap.
Ce qui est requis
Vous devez référencer jquery.js et bootstrap-collapse.js - ces deux fichiers JavaScript se trouvent dans le dossier docs/assets/js.
Vous pouvez créer des composants réductibles sans écrire beaucoup de JavaScript ni appeler JavaScript.
Exemple
Le premier exemple montre comment créer un composant réductible sans appeler JavaScript.
Exemple
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="../index.html">
Cliquez pour développer. Cliquez à nouveau pour réduire. Partie I.
</a>
</div>
<div id="collapseOne" class="accordion-body collapse" style="height: 0px; ">
<div class="accordion-inner">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="../index.html">
Cliquez pour développer. Cliquez à nouveau pour réduire. Partie II.
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="../index.html">
Cliquez pour développer. Cliquez à nouveau pour réduire. Partie III.
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js.html"></script>
Voir l'exemple en ligne
Explication
Il y a trois points à noter. Premièrement, ajoutezdata-toggle="collapse"au lien sur lequel vous souhaitez cliquer, pour développer ou réduire le composant.
Deuxièmement, ajoutez unhrefou undata-targetattribut au composant parent, dont la valeur est l'id du composant enfant.
Troisièmement, ajoutez undata-parentattribut pour créer un effet d'accordéon. La valeur de l'attribut data-parent est la même que l'attribut id de la div conteneur principale (qui contient tout le composant accordéon). Si vous souhaitez créer un composant repliable simple, moins complexe qu'un accordéon, vous n'avez pas besoin d'ajouter cet attribut.
Exemple
Le deuxième exemple montre comment créer un composant repliable simple.
Exemple
<div id="demo" class="collapse">
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. Duis aute irure dolor in reprehe.
</div>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script type="text/javascript" src="../twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js.html"></script>
Voir l'exemple en ligne
Appel via JavaScript
Vous pouvez utiliser le code suivant pour déclencher le collapse via JavaScript.
$(".collapse").collapse()
Options, méthodes et événements
Voici quelques options, méthodes et événements utilisés par le plugin JavaScript Bootstrap Collapsible. Ils sont les suivants :
Options
parent:Le type de valeur est Selector. La valeur par défaut est false. Lorsque l'élément parent est affiché, tous les éléments réductibles sous le parent sont fermés.
toggle:Le type de valeur est Boolean. La valeur par défaut est true. Lorsqu'il est appelé, bascule tous les éléments réductibles.
toggle:Le type de valeur est Boolean. La valeur par défaut est true. Lorsqu'il est appelé, bascule tous les éléments réductibles.
Méthodes
.collapse(options):Déclenche le contenu réductible. Accepte un objet d'options facultatif.
.collapse('toggle'):Affiche ou masque un élément de page réductible.
.collapse('show'):Affiche un élément de page réductible.
.collapse(hide):Masque un élément de page réductible.
Événements
show:LorsqueshowCet événement est déclenché immédiatement après l'appel de la méthode d'instance.
shown:Cet événement est déclenché après l'affichage de l'élément de page repliable (et une fois la transition CSS également terminée).
hide:QuandhideCet événement est déclenché immédiatement après l'appel de la méthode d'instance.
hidden:Cet événement est déclenché après que l'élément de page repliable a été masqué à l'utilisateur (et une fois la transition CSS également terminée).
Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.
Autres extensions