Bootstrap 4 : effet accordéon (Collapse)
Samedi 14 avril 2018 18:47
L'effet accordéon est très proche du menu déroulant. Dans les deux plugins on a un déclencheur et un élément qui apparaît ou disparaît. Mais le présent plugin est plus adapté pour afficher des contenus variés alors que le précédent est spécifiquement consacré aux menus déroulants. D'autre part le contenu affiché par le présent plugin vient prendre sa place dans le flux.
Le principe
Ce plugin nécessite 2 éléments :- un déclencheur avec l'attribut data-toggle="collapse",
- un contenu avec la classe collapse.
- un lien : la référence se fait avec un attribut href,
- un bouton : la référence se fait avec un attribut data-target.
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#contenu">
Bouton
</button>
<a data-toggle="collapse" href="#contenu">
Lien
</a>
<div class="collapse" id="contenu">
Contenu
</div>
<p>Paragraphe suivant</p>
La classe show est utilisée pour commuter l'affichage. Donc pour avoir le contenu ouvert dès le chargement il suffit d'ajouter cette classe :
<div class="collapse show" id="contenu">
Maintenant qu'on a vu le principe de ce plugin voyons comment on l'utilise concrètement.
Effet accordéon avec le composant carte
Le plugin accordéon (Collapse) est bien adapté au composant card, voici un premier exemple :<div class="card">
<div class="card-header">
<a href="#item" class="card-link" data-toggle="collapse"> Montrez-moi !</a>
</div>
<div class="collapse" id="item">
<div class="card-body">
<p class="card-text"> Coucou !</p>
</div>
</div>
</div>
Voici un exemple plus réaliste avec un effet démultiplié :
<div id="accordeon">
<div class="card">
<div class="card-body">
<h4 class="card-title">Les plugins de Bootstrap</h4>
</div>
<div class="card-header">
<a href="#item1" class="card-link" data-toggle="collapse" data-parent="#accordeon">Accordéon</a>
</div>
<div class="collapse show" id="item1">
<div class="card-body">
<p class="card-text">Ce plugin permet de créer des effets "accordéon" totalement paramétrables.</p>
</div>
</div>
<div class="card-header">
<a href="#item2" class="card-link" data-toggle="collapse" data-parent="#accordeon">Fenêtre modale</a>
</div>
<div class="collapse" id="item2">
<div class="card-body">
<p class="card-text">Ce plugin permet de créer des fenêtres modales élégantes avec une grande simplicité.</p>
</div>
</div>
<div class="card-header">
<a href="#item3" class="card-link" data-toggle="collapse" data-parent="#accordeon">Carousel</a>
</div>
<div class="collapse" id="item3">
<div class="card-body">
<p class="card-text">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.</p>
</div>
</div>
</div>
</div>
Pour obtenir un seul élément ouvert à la fois, donc que le nouveau qui s'ouvre ferme le précédent, on utilise une balise englobante avec un identifiant (ici accordeon) et au niveau de chaque élément on utilise l'attribut data-parent pour référencer cet identifiant.
Effet accordéon sur une liste groupée
On peut utiliser le plugin pour une liste groupée et ainsi créer un effet de menu déroulant. Voici un exemple de mise en œuvre :<div class="card bg-warning">
<div class="card-body">
<h5 class="card-text">
<span class="fa fa-folder-o"></span>
<a href="#menu" data-toggle="collapse"> Menu</a>
</h5>
</div>
<div id="menu" class="collapse">
<div class="list-group">
<a href="#" class="list-group-item"><span class="fa fa-pencil"></span> Articles</a>
<a href="#" class="list-group-item"><span class="fa fa-newspaper-o"></span> Nouvelles</a>
<a href="#" class="list-group-item"><span class="fa fa-file"></span> Lettre d'information</a>
<a href="#" class="list-group-item"><span class="fa fa-commenting"></span> Commentaires</a>
</div>
</div>
</div>
Effet accordéon dans une barre de navigation
On a vu dans les précédents chapitre que la barre de navigation peut changer d'aspect selon la largeur d'affichage avec la classe navbar-expand-*. Ainsi avec l'exemple de la partie précédente on a cet aspect sur écran large : Sur écran de largeur réduite la question se complique un peu... Le problème c'est que la barre devient alors bien encombrante, surtout si elle est chargée ! Le composant accordéon est alors parfaitement adapté ! Voilà une barre équipée de ce composant :<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Mon site</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Commuter la navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navigation">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Accueil <span class="sr-only">Accueil</span></a>
<li class="nav-item">
<a class="nav-link" href="#">Témoignages</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Références</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Bibliographie</a>
</li>
</ul>
</li>
</nav>
Sur écran large on a l'aspect classique :
Mais sur écran réduit on a cet aspect :
Les éléments de navigation sont cachés et on dispose d'un bouton pour les faire apparaître :
Le même bouton sert pour les faire disparaître.
De façon général on équipe systématiquement ainsi la barre de navigation.
Pour inverser la position du titre et du bouton il suffit d'inverser la position de leur code.
Accessibilité
Au niveau du déclencheur, donc l'élément qui comporte data-toggle="collapse", il est préconisé de prévoir :- aria-expanded="false" pour indiquer que le contenu n'est pas affiché (et évidemment true s'il est affiché),
- aria-controls="{id}" pour pointer le contenu dans le cas où on a un identifiant.
<button class="btn btn-secondary" type="button" data-toggle="collapse" data-target="#contenu" aria-expanded="false" aria-controls="contenu">
Bouton
</button>
<a data-toggle="collapse" href="#contenu" aria-expanded="false" aria-controls="contenu">
Lien
</a>
<div class="collapse" id="contenu">
Contenu
</div>
Activation avec Javascript
On peut activer ce plugin avec jQuery et lancer des commandes sur n'importe quel élément. Voici un exemple avec 3 icônes pour la commande :<div class="container">
<br>
<span id="show" class="fa fa-toggle-down fa-3x"></span>
<span id="toggle" class="fa fa-refresh fa-3x"></span>
<span id="hide" class="fa fa-toggle-up fa-3x"></span>
<div class="collapse">
<h3> Je suis le titre de l'accordéon</h3>
<p> Je suis le contenu de l'accordéon</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('.fa').click(function(){
$('.collapse').collapse($(this).attr('id'))
})
})
</script>
Si vous voulez un curseur de souris en forme de pointeur ajoutez ce CSS :
.fa { cursor: pointer; }
On a ces actions :
- un clic sur la première icône affiche l'accordéon
- un clic sur la deuxième icône permute l'affichage (toggle), donc si l'accordéon est affiché il disparaît et réciproquement,
- un clic sur la troisième icône cache l'accordéon.
- show pour afficher l'accordéon,
- hide pour cacher l'accordéon,
- toggle pour permuter l'affichage.
Les événements
Il y a 4 événements utilisables pour ce composant :- show.bs.collapse : se déclenche dès l'appel à la méthode show
- shown.bs.collapse : se déclenche lorsque le zone devient visible
- hide.bs.collapse : se déclenche dès l'appel à la méthode hide
- hidden.bs.collapse : se déclenche lorsque la zone est masquée
<div class="container">
<span id="show" class="fa fa-toggle-down fa-3x"></span>
<span id="toggle" class="fa fa-refresh fa-3x"></span>
<span id="hide" class="fa fa-toggle-up fa-3x"></span>
<div class="collapse">
<h3> Je suis le titre de l'accordéon</h3>
<p> Je suis le contenu de l'accordéon</p>
</div>
<p><span class="badge badge-warning"></span></p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('.fa').click(function(){
$('.collapse').collapse($(this).attr('id'))
})
$('.collapse')
.on("shown.bs.collapse", function () {
$('.badge').text('"Accordéon" est affiché')
})
.on("hidden.bs.collapse", function () {
$('.badge').text('"Accordéon" est caché')
});
});
</script>
Voyons à présent un second exemple, en reprenant l'effet accordéon sur une liste groupée vu plus haut. Il serait très esthétique de modifier l'icône en fonction de la visibilité de la liste. Il suffit de modifier légèrement le code en identifiant la liste et en utilisant les événements :
<div class="container">
<div class="card bg-warning">
<div class="card-body">
<h5 class="card-text">
<span id="icone" class="fa fa-folder-o"></span>
<a href="#menu" data-toggle="collapse"> Menu</a>
</h5>
</div>
<div id="menu" class="collapse">
<div class="list-group">
<a href="#" class="list-group-item"><span class="fa fa-pencil"></span> Articles</a>
<a href="#" class="list-group-item"><span class="fa fa-newspaper-o"></span> Nouvelles</a>
<a href="#" class="list-group-item"><span class="fa fa-file"></span> Lettre d'information</a>
<a href="#" class="list-group-item"><span class="fa fa-commenting"></span> Commentaires</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function(){
$('#menu')
.on("shown.bs.collapse", function () {
$('#icone').removeClass('fa-folder-o').addClass('fa-folder-open-o')
})
.on("hidden.bs.collapse", function () {
$('#icone').removeClass('fa-folder-open-o').addClass('fa-folder-o')
})
})
</script>
En résumé
- L'effet accordéon permet de faire apparaître ou disparaître une zone de la page.
- Il est possible d'ajouter des en-têtes et d'intégrer des listes groupées.
- On l'utilise en particulier pour rendre une barre de navigation rétractable sur petit support.
Par bestmomo
Nombre de commentaires : 4