Vous pouvez utiliser HTML, CSS et JavaScript pour créer des composants Web élégants et dynamiques. Un composant utile que vous pouvez créer est un menu en accordéon.
Les menus accordéon se déroulent et se réduisent lorsqu'un utilisateur clique sur un bouton. C'est un excellent moyen de ne pas avoir à afficher toutes les informations sur un sujet au début, et de donner aux utilisateurs la possibilité de n'afficher que ce dont ils ont besoin.
Dans ce tutoriel, je vais vous montrer comment construire un menu accordéon simple qui ressemble à ceci :
Qu'est-ce qu'un menu accordéon ?
Dans le domaine de la conception d'interfaces utilisateur, un menu accordéon est une liste de divers éléments d'information empilés verticalement. Pour chaque liste, il y a un en-tête étiqueté qui pointe vers le contenu correspondant. Le contenu de chaque liste est masqué par défaut. Si vous cliquez sur une étiquette particulière, son contenu sera déployé.
Un cas d'utilisation très courant des accordéons est la présentation d'une liste de FAQ (Frequently Asked Questions - Questions Fréquemment Posées en français). Si vous cliquez sur une question, la réponse correspondante s'affiche.
Comment créer un menu accordéon en utilisant HTML, CSS et JS ?
Nous allons commencer par définir le balisage HTML. Si vous utilisez un IDE comme VS Code et que vous avez installé emmet, créez un nouveau fichier index.html et tapez ! suivi de la touche ENTRÉE. Cela devrait créer un code HTML de référence pour votre projet.
Vous pouvez également copier le code suivant dans votre fichier index.html pour définir la structure de votre page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
La structure du dossier est simple. Nous allons créer un dossier appelé accordeon. Dans ce dossier, nous allons créer trois fichiers : index.html, styles.css et index.js. Nous allons également lier tous les fichiers à notre code HTML, comme vous pouvez le voir ci-dessus.
Balisage HTML pour l'accordéon
Pour chaque liste du menu, nous aurons deux éléments div : un pour l'étiquette, l'autre pour le contenu.
<body>
<div class="accordion-body">
<div class="accordion">
<h1>Frequently Asked Questions</h1>
<hr>
<div class="container">
<div class="label">What is HTML</div>
<div class="content">Hypertext Markup Language (HTML) is a computer language that makes up most web pages and online applications. A hypertext is a text that is used to reference other pieces of text, while a markup language is a series of markings that tells web servers the style and structure of a document. HTML is very simple to learn and use.</div>
</div>
<hr>
<div class="container">
<div class="label">What is CSS?</div>
<div class="content">CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users. CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based markup language. CSS is popularly called the design language of the web.
</div>
</div>
<hr>
<div class="container">
<div class="label">What is JavaScript?</div>
<div class="content">JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third of the web trio.</div>
</div>
<hr>
<div class="container">
<div class="label">What is React?</div>
<div class="content">React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook. </div>
</div>
<hr>
<div class="container">
<div class="label">What is PHP?</div>
<div class="content">PHP is a server-side and general-purpose scripting language that is especially suited for web development. PHP originally stood for Personal Home Page. However, now, it stands for Hypertext Preprocessor. It’s a recursive acronym because the first word itself is also an acronym.</div>
</div>
<hr>
<div class="container">
<div class="label">What is Node JS?</div>
<div class="content">Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm</div>
</div>
<hr>
</div>
</div>
<script src="index.js" type="text/javascript"></script>
</body>
Sans CSS, notre page aura l'air toute blanche, comme ceci :
Comment ajouter du style à l'accordéon avec CSS ?
Nous voulons bien sûr que notre menu accordéon soit beau. Il est temps de faire intervenir le CSS. J'ai ajouté quelques commentaires dans le code pour expliquer ce que fait chaque élément :
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
/* Définit la couleur de fond du corps en bleu. Définit la police à Rubik. */
body {
background-color: #0A2344;
font-family: 'rubik', sans-serif;
}
/* Aligne le texte de l'en-tête au centre. Définit la marge en haut et en bas à 40px, et celle à gauche et à droite à 0. */
h1 {
text-align: center;
margin: 40px 0;
}
/* Définit la largeur de l'accordéon. Définit la marge à 90px en haut et en bas et auto à gauche et à droite */
.accordion {
width: 800px;
margin: 90px auto;
color: black;
background-color: white;
padding: 45px 45px;
}
Une fois tous ces styles appliqués, voici à quoi ressemblera notre accordéon :
Nous devons maintenant commencer à travailler à l'intérieur pour mettre en place sa fonctionnalité. Tout d'abord, nous définissons la propriété position de chacun des conteneurs (contenant à la fois l'étiquette et le contenu) sur relative.
Cela signifie que nous pouvons maintenant positionner les enfants du conteneur par rapport à ce dernier.
.accordion .container {
position: relative;
margin: 10px 10px;
}
/* Positionne les étiquettes par rapport au .container. Ajoute une marge intérieure en haut et en bas et augmente la taille de la police. Fait également de son curseur un pointeur */
.accordion .label {
position: relative;
padding: 10px 0;
font-size: 30px;
color: black;
cursor: pointer;
}
Vous pouvez maintenant remarquer la différence dans l'image ci-dessous :
La prochaine action consistera à ajouter un petit signe "+" à la fin de chaque liste. Les utilisateurs sauront ainsi qu'ils peuvent déployer la section pour en savoir plus.
Pour ce faire, nous utiliserons le sélecteur ::before. Les sélecteurs ::before et ::after sont utilisés pour placer du contenu respectivement avant ou après un élément spécifique.
Ici, nous insérons le signe "+" avant l'étiquette. Mais nous utiliserons les propriétés de décalage top et right pour le placer dans le coin le plus à droite.
/* Positionne le signe plus à 5px de la droite. Centrez-le en utilisant la propriété transform. */
.accordion .label::before {
content: '+';
color: black;
position: absolute;
top: 50%;
right: -5px;
font-size: 30px;
transform: translateY(-50%);
}
/* Masque le contenu (height : 0), diminue la taille de la police, justifie le texte et ajoute une transition */
.accordion .content {
position: relative;
background: white;
height: 0;
font-size: 20px;
text-align: justify;
width: 780px;
overflow: hidden;
transition: 0.5s;
}
/* Définit la largeur, la marge gauche et la bordure de la ligne horizontale entre les contenus */
.accordion hr {
width: 100;
margin-left: 0;
border: 1px solid grey;
}
Avec ce dernier style appliqué, cela améliorera tout. Remarquez également que le contenu de chaque liste est maintenant caché.
Ajout du code JavaScript à notre accordéon
À ce stade, notre accordéon est plutôt statique. Pour que le conteneur affiche le contenu lorsqu'un utilisateur clique dessus, nous devons ajouter du code JavaScript.
Naviguez jusqu'à votre script index.js et tapez le code suivant :
const accordion = document.getElementsByClassName('container');
for (i=0; i<accordion.length; i++) {
accordion[i].addEventListener('click', function () {
this.classList.toggle('active')
})
}
Ce script va accéder à toutes nos listes à travers le nom de classe du conteneur : container.
Ensuite, nous allons boucler la liste. Pour chaque conteneur, nous voulons simplement enregistrer un listener d'événement pour lui. Lorsqu'il est cliqué, nous voulons afficher la classe "active" sur cet élément.
Nous allons maintenant tester cet effet. Cliquez sur le premier conteneur avec l'étiquette What is HTML, ouvrez votre outil de développement ou DevTools (cliquez sur F12), et inspectez-le dans l'onglet "Elements".
Vous devriez trouver la classe active enregistrée sur cet élément :
En cliquant à nouveau sur l'élément, vous enlèverez la classe active.
Comment terminer le programme ?
Il y a une dernière chose que nous devons faire. Nous devons créer une classe active dans une feuille de style. Nous allons définir l'aspect que doit avoir notre accordéon lorsque JavaScript affiche la classe sur un conteneur.
/* Désactive la partie contenu lorsqu'elle est active. Définit la hauteur */
.accordion .container.active .content {
height: 150px;
}
/* Passe du signe plus au signe négatif une fois activé */
.accordion .container.active .label::before {
content: '-';
font-size: 30px;
}
Voici comment notre menu accordéon se présente et se comporte à la fin :
Conclusion
Dans ce tutoriel, nous avons créer un menu accordéon en utilisant HTML, CSS et JavaScript.
Merci de nous avoir suivis. J'espère que vous avez appris quelque chose d'utile dans ce tutoriel.
