Accordion
Dans le monde du développement web, les menus accordion sont devenus une technique populaire pour afficher les informations de manière organisée et compacte. Un menu accordion permet aux utilisateurs d'accéder facilement aux différentes sections d'une page Web sans encombrer l'espace visuel.
Dans ce tutoriel, nous vous guiderons pas à pas dans la création d'un menu accordion en utilisant les langages HTML, CSS et JavaScript. Nous commencerons par expliquer les bases de la structure HTML requise pour le menu accordion, puis nous ajouterons des styles CSS pour obtenir un résultat attrayant et responsive. Enfin, nous mettrons en place la fonctionnalité JavaScript qui permettra d'ouvrir et de fermer les sections du menu au clic.
Que vous soyez un novice ou un développeur web expérimenté, vous trouverez ce tutoriel utile pour améliorer l'ergonomie de votre site web en proposant une navigation claire et intuitive. Suivez-nous et apprenez à créer un menu accordion qui améliorera l'expérience utilisateur sur votre site web.
index.html
<!DOCTYPE html>
<!-- RudLess -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion en HTML CSS & JavaScript |</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="accordion">
<div class="accordion-content">
<header>
<span class="title">Qu'entendez-vous par Accordion?</span>
<i class="fa-solid fa-plus"></i>
</header>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
</p>
</div>
<div class="accordion-content">
<header>
<span class="title">Qu'entendez-vous par Accordion?</span>
<i class="fa-solid fa-plus"></i>
</header>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
</p>
</div>
<div class="accordion-content">
<header>
<span class="title">Qu'entendez-vous par Accordion?</span>
<i class="fa-solid fa-plus"></i>
</header>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto neque, sed inventore illum ut quis ducimus deleniti temporibus maiores? At nisi sed pariatur cupiditate quidem quod adipisci aut, eos quis minima voluptates non veniam ipsam quasi architecto ducimus error eum id ab, suscipit doloribus, ut accusantium consequuntur voluptate! Unde, hic sed rerum officia totam id libero officiis nihil rem sequi porro labore praesentium repudiandae a blanditiis molestias nisi beatae natus! Ea, ut voluptates, natus harum nesciunt odio hic eveniet reprehenderit veritatis, possimus tempora magni soluta eaque quidem neque maxime nostrum sapiente commodi? Earum ex cumque cupiditate dicta, tempora temporibus quaerat.
</p>
</div>
<div class="accordion-content">
<header>
<span class="title">Qu'entendez-vous par Accordion??</span>
<i class="fa-solid fa-plus"></i>
</header>
<p class="description">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus nobis ut perspiciatis minima quidem nisi, obcaecati, delectus consequatur fuga nostrum iusto ipsam ducimus quibusdam possimus. Maiores non enim numquam voluptatem?
</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #E3F2FD;
}
.accordion{
max-width: 530px;
width: 100%;
background: #FFF;
margin: 0 15px;
padding: 15px;
border-radius: 8px;
box-shadow: 0 0 4px rgba(0,0,0,0.2);
}
.accordion .accordion-content{
margin: 10px 0;
border-radius: 4px;
background: #FFF7F0;
border: 1px solid #FFD6B3;
overflow: hidden;
}
.accordion-content:nth-child(2){
background-color: #F0FAFF;
border-color: #CCEEFF;
}
.accordion-content:nth-child(3){
background-color: #FFF0F3;
border-color: #FFCCD6;
}
.accordion-content:nth-child(4){
background-color: #F0F0FF;
border-color: #CCCCFF;
}
.accordion-content.open{
padding-bottom: 10px;
}
.accordion-content header{
display: flex;
min-height: 50px;
padding: 0 15px;
cursor: pointer;
align-items: center;
justify-content: space-between;
transition: all 0.2s linear;
}
.accordion-content.open header{
min-height: 35px;
}
.accordion-content header .title{
font-size: 14px;
font-weight: 500;
color: #333;
}
.accordion-content header i{
font-size: 15px;
color: #333;
}
.accordion-content .description{
height: 0;
font-size: 12px;
color: #333;
font-weight: 400;
padding: 0 15px;
transition: all 0.2s linear;
}
script.js
const accordionContent = document.querySelectorAll(".accordion-content");
accordionContent.forEach((item, index) => {
let header = item.querySelector("header");
header.addEventListener("click", () =>{
item.classList.toggle("open");
let description = item.querySelector(".description");
if(item.classList.contains("open")){
description.style.height = `${description.scrollHeight}px`;
item.querySelector("i").classList.replace("fa-plus", "fa-minus");
}else{
description.style.height = "0px";
item.querySelector("i").classList.replace("fa-minus", "fa-plus");
}
removeOpen(index);
})
})
function removeOpen(index1){
accordionContent.forEach((item2, index2) => {
if(index1 != index2){
item2.classList.remove("open");
let des = item2.querySelector(".description");
des.style.height = "0px";
item2.querySelector("i").classList.replace("fa-minus", "fa-plus");
}
})
}