Effet accordéon Javascript, HTML et CSS
L'effet accordéon est utilisé pour afficher ou masquer des sections de contenu.
Il est généralement composé de titres d'accordéon (ou en-têtes) et de contenus associés qui peuvent être ouverts ou fermés en réponse à l'interaction de l'utilisateur.
totam error omnis optio excepturi consequatur dolore quia pariatur unde.
dignissimos architecto magni. Modi aspernatur optio nobis odit, neque molestias quo quae!
{{CODE1}}
Comment réaliser l'effet accordéon en Javascript
Commençons par se poser les bonnes questions avant de coder.
1. Comprendre le besoin
Quel est l'objectif de l'effet d'accordéon ?
Quelles sections de contenu doivent être affichées/masquées ?
Quels sont les éléments HTML nécessaires pour chaque accordéon ?
2. Concevoir la structure HTML
Créez la structure HTML en utilisant des éléments pour les titres d'accordéon et les contenus associés.
3. Ajouter des styles CSS
Définissez des styles CSS pour les éléments HTML, y compris les éléments actifs et non actifs.
Créez des transitions CSS pour une animation en douceur.
4. Le Javascript
- Sélectionner les éléments en JavaScript
Utilisez JavaScript pour sélectionner les éléments nécessaires (par exemple, avec document.querySelectorAll).
- Ajouter des gestionnaires d'événements
Ajoutez des gestionnaires d'événements de clic aux titres d'accordéon pour détecter quand l'utilisateur clique.
- Gérer l'état actif
Lorsqu'un titre est cliqué, utilisez JavaScript pour ajouter ou supprimer une classe qui indique l'état actif.
En fonction de l'état actif, ajustez la hauteur maximale du contenu pour l'afficher ou le masquer.
Code de l'effet accordéon
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Effet accordéon</title>
</head>
<body>
<div class="accordion">
<div class="accordion-header">Titre 1</div>
<div class="accordion-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus sit ut aut obcaecati facere! Commodi
totam error omnis optio excepturi consequatur dolore quia pariatur unde.
</div>
</div>
<div class="accordion">
<div class="accordion-header">Titre 2</div>
<div class="accordion-content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit consequuntur hic velit, minus
dignissimos architecto magni. Modi aspernatur optio nobis odit, neque molestias quo quae!
</div>
</div>
<script src="script.js"></script>
</body>
</html>
.accordion {
width: 100%;
border: none;
margin-bottom: 10px;
}
.accordion-header {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 20px;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion-content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion.active .accordion-header {
background-color: #ccc;
}
.accordion.active .accordion-content {
height: auto;
}
.accordion .accordion-header:after {
content: '.accordion {
width: 100%;
border: none;
margin-bottom: 10px;
}
.accordion-header {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 20px;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.accordion-content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion.active .accordion-header {
background-color: #ccc;
}
.accordion.active .accordion-content {
height: auto;
}
.accordion .accordion-header:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion.active .accordion-header:after {
content: "\2212";
}
2B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.accordion.active .accordion-header:after {
content: "12";
}
const accordions = document.querySelectorAll(".accordion");
accordions.forEach((accordion) => {
const header = accordion.querySelector(".accordion-header");
const content = accordion.querySelector(".accordion-content");
header.addEventListener("click", () => {
accordion.classList.toggle("active");
if (accordion.classList.contains("active")) {
content.style.maxHeight = content.scrollHeight + "px";
} else {
content.style.maxHeight = null;
}
});
});
Explication du code Javascript :
// Sélectionne tous les éléments avec la classe "accordion" et les stocke dans un tableau.
const accordions = document.querySelectorAll(".accordion");
// Parcourt chaque élément d'accordéon.
accordions.forEach(accordion => {
// Sélectionne l'élément avec la classe "accordion-header" à l'intérieur de l'accordéon.
const header = accordion.querySelector(".accordion-header");
// Sélectionne l'élément avec la classe "accordion-content" à l'intérieur de l'accordéon.
const content = accordion.querySelector(".accordion-content");
// Ajoute un gestionnaire d'événements de clic au titre d'accordéon.
header.addEventListener("click", () => {
// Alterne (ajoute ou supprime) la classe "active" de l'accordéon.
accordion.classList.toggle("active");
// Vérifie si l'accordéon a maintenant la classe "active".
if (accordion.classList.contains("active")) {
// Si c'est le cas, réglez la hauteur maximale du contenu pour le faire apparaître en définissant la hauteur maximale sur la hauteur réelle du contenu en pixels.
content.style.maxHeight = content.scrollHeight + "px";
} else {
// Sinon, réinitialise la hauteur maximale du contenu (pour le masquer) en définissant la hauteur maximale sur "null".
content.style.maxHeight = null;
}
});
});