An Accordion is a section that contains a header and description with open and close functionality. Basically, the description of the accordion is in hidden status and we have to click on the header section to get a description. Every accordion’s header has its own description. The accordion can be made of various text content, for eg FAQ.
Let’s have a quick look at the given image of our accordion. There is a total of four tabs with different beautiful background colors. In every tab, there are different questions and icons. As you have seen on the second tab, it is in the opened state and the other three are in the closed state. If you click on every tab it will open and close also If one is in opened condition and you clicked on another tab the previously opened tab will automatically close and, the tab you have clicked will be opened.
All the HTML CSS and JavaScript code that I have used to create this accordion has been uploaded below before you jump into the source code, I would like to explain some basic points of this video tutorial on the accordion.
How to Create Responsive Accordion
To get the following HTML CSS and JavaScript code for an Accordion. You need to create three files, HTML, CSS, and JavaScript file. After creating these three files then you can copy-paste the given codes on your document. You can also download all source code files from the given download button.
Index.html File
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!----======== CSS ======== -->
<link rel="stylesheet" href="style.css">
<!-- =====Fontawesome CDN Link===== -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>Accordion in HTML CSS & JavaScript</title>
</head>
<body>
<div class="accordion">
<div class="accordion-content">
<header>
<span class="title">What do you mean by 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">What do you mean by 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">What do you mean by 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">What do you mean by 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>Styles.css
/* ===== Google Font Import - Poppins ===== */
@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;
}App.js File
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`; //scrollHeight property returns the height of an element including padding , but excluding borders, scrollbar or margin
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); //calling the funtion and also passing the index number of the clicked header
})
})
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");
}
})
}
