Hello friend, hope you are doing great. Today in this blog, you will learn to create a Responsive Accordion in HTML CSS, and JavaScript. There are lots of JavaScript Projects I have made to date, obviously accordion too, but in that accordion, there was no feature of auto close while we clicked on the second tab. Now in this accordion, I have added an auto-close feature.
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.
You can the demo of this accordion and all the HTML CSS and JavaScript code that I have used to create this beautiful accordion.
Accordion in HTML CSS & JavaScript
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.
As you have seen on the video tutorial of your accordion. In the first, all the accordions were in closed form. When I clicked on the tab it opened and when I clicked on it a second time it was closed. While the accordion tab opened you saw some description of that accordion tab or section. When I leave the tab open and click on the other tab the previous tab automatically closed.
To make the UI design of this accordion I have used HTM and CSS and to open and close it and obviously auto close it, I have used Javascript code
I hope now you can build this accordion by using HTML CSS and JavaScript. If you are feeling difficulty making this accordion. I have provided all the source codes below.
You Might Like This:
Create Accordion [Source Code]
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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>
/* ===== 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;
}
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");
}
})
}
If you face any difficulties while creating your Accordion or your code is not working as expected, you can download the source code files for this Accordion for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
