Un accordéon, dans le domaine du développement et de la conception, est un élément de contrôle graphique composé d'en-têtes empilés verticalement et d'un contenu interne caché. Lorsque l'on clique dessus, la zone de contenu précédemment réduite/cachée d'un en-tête se développe pour afficher son contenu, souvent du texte, des images ou d'autres informations groupées.
Vous avez probablement vu (ou utilisé) un accordéon sur une page de FAQ, avec les questions affichées dans les en-têtes, et les réponses à ces questions cachées dans les boîtes de contenu.
Les accordéons peuvent contribuer à améliorer l'expérience de l'utilisateur sur les pages Web et les applications contenant de nombreuses informations. Ils permettent aux développeurs de regrouper toutes ces informations sur une page, mais de n'afficher que les en-têtes/titres de niveau supérieur. Les utilisateurs peuvent alors parcourir tous les titres sans être submergés par les détails. Ils peuvent plus facilement trouver et cliquer sur les en-têtes/titres qui les intéressent et accéder à un contenu plus détaillé.
Il existe d'innombrables widgets, plugins et autres extraits de code qui ajouteront automatiquement et magiquement un accordéon à votre site Web ou à votre application. Cependant, vous pouvez également créer un accordéon simple avec seulement du HTML, du CSS et du JavaScript.
Code HTML de notre accordéon
<h2>Accordéon</h2>
<ul id="accordion">
<li>
<button aria-controls="content-1" aria-expanded="false" id="accordion-control-1">FAQ 1</button>
<div class="acc-item-content" aria-hidden="true" id="content-1">
<p>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.</p>
</div>
</li>
<li>
<button aria-controls="content-2" aria-expanded="false" id="accordion-control-2">FAQ 2</button>
<div class="acc-item-content" aria-hidden="true" id="content-2">
<p>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.</p>
</div>
</li>
<li>
<button aria-controls="content-3" aria-expanded="false" id="accordion-control-3">FAQ 3</button>
<div class="acc-item-content" aria-hidden="true" id="content-3">
<p>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.</p>
</div>
</li>
<li>
<button aria-controls="content-4" aria-expanded="false" id="accordion-control-4">FAQ 4 </button>
<div class="acc-item-content" aria-hidden="true" id="content-4">
<p>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.</p>
</div>
</li>
<li>
<button aria-controls="content-5" aria-expanded="false" id="accordion-control-5">FAQ 5</button>
<div class="acc-item-content" aria-hidden="true" id="content-5">
<p>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.</p>
</div>
</li>
</ul>
En ce qui concerne le code HTML, l'ensemble de notre accordéon est logé dans une liste non ordonnée. Chaque élément de la liste contient un "<div>" avec le contenu interne et un bouton qui permet de faire basculer la visibilité du "<div>". Afin de rendre l'accordéon plus accessible, nous avons prévu des classes "aria-expanded" et "aria-hidden", ainsi que des classes "aria-controls" sur les boutons qui correspondent aux "id" des "<div>" avec les classes "acc-item-content". Ces classes aideront les utilisateurs à comprendre notre accordéon et ce qui est visible ou non lorsque l'on clique sur les boutons.
On a également placé du texte dans des balises de paragraphe, ce qui sera utile si vous avez plus de quelques phrases dans les "<div>".
J'espère que vous utilisez une boucle quelque part pour créer dynamiquement chaque élément de la liste et son contenu.
Styles CSS de notre accordéon
ul {
list-style: none;
}
#accordion button:focus {
border-radius: 0px;
outline: none;
}
#accordion button {
outline: none;
background-color: royalblue;
padding: 10px;
border: none;
border-bottom: 1px solid darkslategrey;
color: white;
width: 100%;
text-align: left;
font-size: 16px;
border-radius: 0px;
}
#accordion li {
border: 1px solid darkslategrey;
border-bottom: none;
}
.acc-item:last-child {
border-bottom: 1px solid darkslategrey;
}
#accordion button::after {
content: "\002B";
font-weight: 900;
font-size: 22px;
float: right;
}
#accordion {
width: 80%;
max-width: 800px;
min-width: 275px;
margin: auto;
}
La plupart des CSS sont destinés au style. Nous ajoutons des couleurs d'arrière-plan, des bordures et du pseudo-contenu pour indiquer visuellement qu'il s'agit d'un accordéon, et que vous devez cliquer si vous voulez en voir plus.
Techniquement, le seul style CSS dont vous avez besoin est celui-ci :
.acc-item-content {
padding: 0px 10px;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
Le style CSS ci-dessus fixe la hauteur des "<div>" à 0 (ce qui permet de les masquer) et donne à la hauteur maximale un style et une vitesse de transition. Cela nous sera utile lorsque nous passerons au JavaScript, où nous modifierons les valeurs de hauteur maximale de nos "<div>" lorsque les boutons seront cliqués.
Script JavaScript de notre accordéon
window.addEventListener("DOMContentLoaded", (event) => {
let buttons = document.querySelectorAll("#accordion button");
buttons.forEach((button) => {
let content = button.nextElementSibling;
button.addEventListener("click", (event) => {
if (button.classList.contains("active")) {
button.classList.remove("active");
button.setAttribute("aria-expanded", false);
content.style.maxHeight = null;
content.setAttribute("aria-hidden", true);
} else {
button.classList.add("active");
button.setAttribute("aria-expanded", true);
content.style.maxHeight = content.scrollHeight + "px";
content.setAttribute("aria-hidden", false);
}
});
});
});
Lorsque tout le contenu du DOM est chargé, nous commençons par récupérer tous les boutons qui sont des éléments enfants de l'élément avec l'id "#accordion".
Ensuite, nous bouclons sur chacun de ces boutons pour récupérer l'élément frère du bouton et l'enregistrer dans une variable appelée "content", puis ajoutons un event listener à chaque bouton, de sorte que lorsque le bouton est cliqué :
- Si le bouton possède la classe "active", supprimer "active" de sa liste de classes et, définir son attribut "aria-expanded" sur "false", puis, définir la valeur "max-height" de la variable "content" sur "null" et enfin, définir l'attribut "aria-hidden" de la variable "content" sur "true".
- Sinon, si le bouton n'a pas la classe "active", ajoutez "active" à sa liste de classes et, mettre son attribut "aria-expanded" à "true", puis, mettre la valeur "max-height" de la variable "content" à la valeur de la hauteur de défilement de la variable "content" (la hauteur du contenu d'un élément) et enfin, mettre l'attribut "aria-hidden" de la variable "content" à "false".
Et voilà : un accordéon accessible et simple, réalisé uniquement avec du HTML, du CSS et du JavaScript classique !
Et lorsque vous cliquez sur un bouton :
