Hello readers, Today in this blog you'll learn how to create a Responsive Accordion Menu using only HTML & CSS. Previously I've shared a blog on how to create a Responsive Testimonials Section and now it's time to create an Accordion that is mainly used while creating a FAQ section on websites.
An accordion menu is a vertically stacked list of headers or items and that can be clicked to show or hide content linked with them. In this program [Responsive Accordion Menu], there are shown four headers of an accordion, and the contents which are associated with them are hidden. By default, the content of the first header is shown and when you clicked on another tab, the content of that label is shown.
These accordion tabs are controlled with HTML , so we can only show the content of one header at one time that means when you expand the content of the second header, the first header content will be collapsed automatically.
You can copy the codes from the given boxes or download the code files from the given link but I recommend you to download the source code files instead of copying codes. Click here to download code files.
You might like this:
Responsive Mega Menu Design
Working Pagination UI Design
Advanced Dropdown Menu Bar
Active Tab Hover Animation
HTML CODE:
<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title>Responsive Accordion Menu | CodingNepal</title> -->
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="wrapper">
<!-- Accordion Heading One -->
<div class="parent-tab">
<input type="radio" name="tab" id="tab-1" checked>
<label for="tab-1">
<span>Accordion Heading One</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
</div>
</div>
<!-- Accordion Heading Two -->
<div class="parent-tab">
<input type="radio" name="tab" id="tab-2">
<label for="tab-2">
<span>Accordion Heading Two</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
</div>
</div>
<!-- Accordion Heading Three -->
<div class="parent-tab tab-3">
<input type="radio" name="tab" id="tab-3">
<label for="tab-3" class="tab-3">
<span>Accordion Heading Three</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<!-- Sub Heading One -->
<div class="child-tab">
<input type="checkbox" name="sub-tab" id="tab-4">
<label for="tab-4">
<span>Sub Heading One</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="sub-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
</div>
</div>
<!-- Sub Heading Two -->
<div class="child-tab">
<input type="checkbox" name="sub-tab" id="tab-5">
<label for="tab-5">
<span>Sub Heading Two</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="sub-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit dolor. Utfacilis labore, exercitationem fuga minima a illo modi vitaerse dignissimos? Vero?</p>
</div>
</div>
</div>
</div>
<!-- Accordion Heading Four -->
<div class="parent-tab">
<input type="radio" name="tab" id="tab-6">
<label for="tab-6">
<span>Accordion Heading Four</span>
<div class="icon"><i class="fas fa-plus"></i></div>
</label>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing thelit. Quam, repellendus facere, id porro magnam blanditiiss quoteos dolores ratione quidem ipsam esse quos pariatur, repellat obcaecati!</p>
</div>
</div>
</div>
</body>
</html>
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
::selection{
background: rgb(0,123,255,0.3);
}
.wrapper{
max-width: 600px;
padding: 0 20px;
}
.wrapper .parent-tab,
.wrapper .child-tab{
margin-bottom: 8px;
border-radius: 3px;
box-shadow: 0px 0px 15px rgba(0,0,0,0.18);
}
.wrapper .parent-tab label,
.wrapper .child-tab label{
background: #007bff;
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
border-radius: 3px;
position: relative;
z-index: 99;
transition: all 0.3s ease;
}
.wrapper .parent-tab label:hover{
background: #006fe6;
}
.parent-tab input:checked ~ label,
.child-tab input:checked ~ label{
border-radius: 3px 3px 0 0;
background: #006fe6;
}
.wrapper label span{
color: #fff;
font-size: 18px;
font-weight: 500;
text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label span{
font-size: 17px;
}
.parent-tab label .icon{
position: relative;
height: 30px;
width: 30px;
font-size: 15px;
color: #007bff;
display: block;
background: #fff;
border-radius: 50%;
text-shadow: 0 -1px 1px #0056b3;
}
.wrapper .child-tab label .icon{
height: 27px;
width: 27px;
}
.parent-tab label .icon i{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.parent-tab input:checked ~ label .icon i:before,
.child-tab input:checked ~ label .icon i:before{
content: '\f068';
}
.wrapper .parent-tab .content,
.wrapper .child-tab .sub-content{
max-height: 0px;
overflow: hidden;
background: #fff;
border-radius: 0 0 3px 3px;
transition: all 0.4s ease;
}
.parent-tab input:checked ~ .content,
.child-tab input:checked ~ .sub-content{
max-height: 100vh;
}
.tab-3 input:checked ~ .content{
padding: 15px 20px;
}
.parent-tab .content p,
.child-tab .sub-content p{
padding: 15px 20px;
font-size: 16px;
}
.child-tab .sub-content p{
font-size: 15px;
}
input[type="radio"],
input[type="checkbox"]{
display: none;
}
Top comments (1)
Great tutorial! I appreciate how you broke down each step, making it easy to follow. The explanation of form validation is especially helpful, as it ensures user inputs are correct before submission. I am a student of Best Boarding Schools in Pune. Would love to see more examples like this for other types of elements. Keep up the good work!