Le plugin jQuery collapse permet de faire de jolis effets d'apparition et de disparition de zones (un clic sur l'image pour voir) :
On va commencer par un exemple simple :
Code : HTML
<div class="container"> </br>
<div class="span6 well">
<h4> Les plugins de Bootstrap</h4>
<br>
<div class="accordion-heading"> <a class="accordion-toggle"
<div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
</div>
<div class="accordion-heading"> <a class="accordion-toggle"
href="#item2" data-toggle="collapse"> Fenêtre modale </a> </div>
<div id="item2" class="collapse">
<div class="accordion-inner"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
</div>
<div class="accordion-heading"> <a class="accordion-toggle"
href="#item3" data-toggle="collapse"> Carousel </a> </div>
<div id="item3" class="collapse">
<div class="accordion-inner"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise
en forme esthétique </div>
</div>
</div> </div>
C'est le code qui correspond à l'image située au-dessus. Il faut distinguer deux éléments :
Le déclencheur sur lequel on clique : ici c'est un lien avec une balise <a>. Il doit comporter la classe accordion-toggle et comporter la propriété data-toggle="collapse"
La zone à masquer ou démasquer : elle est englobée avec un <div> équipé de la classe collapse Le lien entre le déclencheur et la zone se fait par l'identifiant de la zone.
Il y a deux classes dévouées à l'esthétique du contrôle : accordion-heading pour le déclencheur et accordion-inner pour la zone. Si on les enlève, la mise en forme est moins convaincante mais ça fonctionne encore :
On peut encore améliorer l'esthétique en créant des bordures pour bien délimiter les éléments :
Code : HTML
<div class="container"> </br>
<div class="span6 well">
<h4> Les plugins de Bootstrap</h4>
<br>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle"
href="#item1" data-toggle="collapse"> Accordéon </a> </div> <div id="item1" class="collapse in">
<div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle"
href="#item2" data-toggle="collapse"> Fenêtre modale </a> </div>
<div id="item2" class="collapse">
fenêtres modales élégantes avec une grande simplicité. </div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle"
href="#item3" data-toggle="collapse"> Carousel </a> </div>
<div id="item3" class="collapse">
<div class="accordion-inner"> Ce plugin permet de faire défiler des images ou des vidéo,
ou tout autre élément média avec une mise en forme esthétique </div>
</div>
</div>
</div> </div>
Je me suis contenté d'ajouter la classe accordion-group à chaque bloc déclencheur-zone. Les plus attentifs auront aussi remarqué que j'ai ajouté la classe in à la première zone pour qu'elle soit visible dès le départ.
Oui mais j'aimerais que la zone affichée s'efface quand j'en ouvre une nouvelle...
Alors là il faut encore compléter le code :
Code : HTML
<div class="span6 well">
<h4> Les plugins de Bootstrap</h4>
<br>
<div id="monaccordeon">
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle"
href="#item1" data-parent="#monaccordeon" data-toggle="collapse"> Accordéon </a> </div>
<div id="item1" class="collapse in">
<div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle"
href="#item2" data-parent="#monaccordeon" data-toggle="collapse"> Fenêtre modale </a> </div>
<div id="item2" class="collapse">
<div class="accordion-inner"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
<div class="accordion-group">
<div class="accordion-heading"> <a class="accordion-toggle"
href="#item3" data-parent="#monaccordeon" data-toggle="collapse"> Carousel </a> </div>
<div id="item3" class="collapse">
<div class="accordion-inner"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise en forme esthétique </div>
</div>
</div>
</div>
</div>
Tester !
Il a fallu englober d'un <div> avec un identifiant (#monaccordeon) et faire une référence dans les déclencheurs avec data-
parent="#monaccordeon".
Est-ce qu'on peut déclencher avec des boutons ?
Oui on peut mais il faut adapter le code :
Code : HTML
<div class="span6 well">
<h4> Les plugins de Bootstrap</h4>
</br>
<div id="monaccordeon">
<div class="accordion-group">
<button class="btn btn-primary accordion-heading" data- toggle="collapse" data-parent="#monaccordeon" data- target="#item1">Accordéon</button>
<div id="item1" class="collapse accordion-group in">
<div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
</div>
</div>
<div class="accordion-group">
<button class="btn btn-primary accordion-heading" data- toggle="collapse" data-parent="#monaccordeon" data- target="#item2">Fenêtre modale</button>
<div id="item2" class="collapse accordion-group">
<div class="accordion-inner"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
</div>
</div>
<div class="accordion-group">
<button class="btn btn-primary accordion-heading" data- toggle="collapse" data-parent="#monaccordeon" data- target="#item3">Carousel</button>
<div id="item3" class="collapse accordion-group">
<div class="accordion-inner"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média
avec une mise en forme esthétique </div>
</div>
</div>
</div>
Cette fois on fait la référence aux zones avec data-target="#itemx".
Est-ce qu'on peut savoir quand une zone apparaît et l'utiliser dans du code ?
Voici un exemple illustratif avec utilisation de jQuery :
Code : HTML
<div class="container"> <br>
<div class="span6 well">
<h4> Les plugins de Bootstrap</h4>
</br>
<div id="monaccordeon">
<div class="accordion-group">
<button class="btn btn-primary accordion-heading" data- toggle="collapse" data-parent="#monaccordeon" data-
target="#item1">Accordéon</button>
<div id="item1" class="collapse accordion-group in">
<div class="accordion-inner"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables</div>
</div>
</div>
<div class="accordion-group">
<button class="btn btn-primary accordion-heading" data- toggle="collapse" data-parent="#monaccordeon" data-
target="#item2">Fenêtre modale</button>
<div id="item2" class="collapse accordion-group">
<div class="accordion-inner"> Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité. </div>
</div>
</div>
<div class="accordion-group">
<button class="btn btn-primary accordion-heading" data- toggle="collapse" data-parent="#monaccordeon" data-
target="#item3">Carousel</button>
<div id="item3" class="collapse accordion-group">
<div class="accordion-inner"> Ce plugin permet de faire défiler des images ou des vidéo, ou tout autre élément média avec une mise en forme esthétique </div>
</div>
</div>
</div>
</br>
<div id="affichage"><span class="label label- warning">"Accordéon" a été affiché !</span></div>
</div> </div>
<script>
$(function (){
$("#item1").on("shown", function () {
$("#affichage").html('<span class="label label- warning">"Accordéon" a été affiché !</span>');
})
$("#item2").on("shown", function () {
$("#affichage").html('<span class="label label- warning">"Fenêtre modale" a été affiché !</span>');
})
$("#item3").on("shown", function () {
$("#affichage").html('<span class="label label- warning">"Carousel" a été affiché !</span>');
}) });
</script>