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 <input type=”radio”>, 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. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program [Responsive Accordion Menu].
Video Tutorial of Responsive Accordion Menu
In the video, you have seen the accordion menu and how it’s content is expand and collapse. I used font awesome icons (+ and -) to inform or indicate the user that the content is currently collapsed or expanded. This is a pure CSS program and if you’re a beginner then you can also create this type of accordion and use on your projects and HTML pages.
You might like this:
Responsive Accordion Menu [Source Codes]
To create this program (Responsive Accordion Menu). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes in your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</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>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
@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;
}
That’s all, now you’ve successfully created a Responsive Accordion Menu using only HTML & CSS. If your code not work or you’ve faced any errors/problems then please download the source code files from the given download button. It’s free and a .zip file will be downloaded and you’ve extracted it.
