Bootstrap 4 : effet accordéon (Collapse)
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.
Mais comme il n’y a pas de contenant il faut établir un lien entre le déclencheur et le contenu. Cela se fait en attribuant au contenu un identifiant qui sera référencé par le déclencheur avec deux cas :
- 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.
Ce qu’on peut schématiser ainsi :
Donc dans sa version la plus épurée on a ce code avec deux déclencheurs (un lien et un bouton) :
<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.
La valeur de la première propriété évolue automatiquement en fonction de l’apparition ou la disparition du contenu.
Par exemple avec le premier cas vu dans ce chapitre :
<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.
Ce plugin ne possède que la méthode collapse qui accepte ces 3 principaux arguments :
- 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
Voici l’exemple vu ci-dessus complété pour intercepter les événements shown.bs.collapse et hidden.bs.collapse :
<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.
4 commentaires
ApprentiWeb
Bonjour,
j’ai beau copié le code à l’indentitique sur ma page (php je précise) et rien ne se passe … l’animation, n’est pas effective, je ne comprend pas. Certaines ressources sont-elles nécessaires à la réalisation de l’animation ?
Merci d’avance!!
bestmomo
Bonjour,
A priori il suffit d’avoir les librairies CSS et Javascript de Bootstrap en plus de JQuery, je ne crois pas que Popper soit nécessaire…
Patson40
Bonjour,
j’ai une question à ce sujet..
si je souhaite accéder à un volet précis de l’accordéon mais via la barre de navigation du menu du site.. c’est à dire à partir de n’importe quelle page je passe par un sous menu qui me renvoi à la page en question où se trouve l’accordéon mais avec le volet correspondant au lien cliqué. Est-ce possible ? Je ne vois aucun sujet sur ce type de scénario..
Merci de votre aide !
Patrice
bestmomo
Bonjour,
Une façon d’y arriver est d’utiliser Javascript pour ouvrir la page et ainsi gérer le déploiement du volet avec la méthode show puisqu’on dispose de l’information. Une autre approche consiste à ajouter un anchor à l’url à lire avec du Javascript à l’ouverture de la page et utiliser aussi show sur le bon volet.