How to make accordion menus using HTML and CSS
An accordion menu is a type of graphical user interface that allows the user to reveal or hide content by clicking on an element such as a button or heading. It is often used to present information in a compact space, such as on a FAQ page, or to organize navigation within a website or application. So in this tutorial, I have brought another awesome tutorial on web development. In this post, I am going to show you How to make accordion menus using HTML and CSS.
In an accordion menu, only one section can be open at a time. When the user clicks on a section heading, the content for that section expands and the content for any other open sections collapses. This allows the user to view one section at a time and provides a clean and organized way to present a large amount of information in a small space.
Accordion menus can be implemented using HTML, CSS, and JavaScript. The HTML provides the structure for the menu, the CSS styles the menu and provides the animations, and the JavaScript provides the interactivity.
HTML
<!DOCTYPE html>
<head>
<html>
<title>Pure CSS Accordion Menu</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Pure CSS Accordion Menu</h1>
<div class="accordionMenu">
<input type="radio" name="trg1" id="acc1" checked="checked">
<label for="acc1">Section 1</label>
<div class="content">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<input type="radio" name="trg1" id="acc2">
<label for="acc2">Section 2</label>
<div class="content">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<input type="radio" name="trg1" id="acc3">
<label for="acc3">Section 3</label>
<div class="content">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<input type="radio" name="trg1" id="acc4">
<label for="acc4">Section 4</label>
<div class="content">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<input type="radio" name="trg1" id="acc5">
<label for="acc5">Section 5</label>
<div class="content">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
<input type="radio" name="trg1" id="acc6">
<label for="acc6">Section 6</label>
<div class="content">
<div class="inner">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
</div>
</div>
</body>
</html>
CSS
body{
background: #ecf0f1;
font-family: arial;
font-weight: 400;
}
h1{
font-size: 35px;
color: #2c97de;
text-align: center;
text-transform: uppercase;
}
.accordionMenu{
width: 500px;
margin: 0 auto;
}
.accordionMenu input[type=radio]{
display: none;
}
.accordionMenu label{
display: block;
height: 50px;
line-height: 47px;
padding: 0 25px 0 10px;
background: #2c97de;
font-size: 20px;
font-weight: bold;
color: #fff;
position: relative;
cursor: pointer;
border-bottom: 1px solid #e6e6e6;
}
.accordionMenu label::after{
display: block;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #ffffff;
position: absolute;
right: 10px;
top: 20px;
z-index: 10;
transition: all 0.3s ease-in-out;
}
.accordionMenu .content{
max-height: 0;
height: 0;
overflow: hidden;
transition: all 2s ease-in-out;
}
.accordionMenu .content .inner{
font-size: 1.2rem;
color: #2c97de;
line-height: 1.5;
background: white;
padding: 20px 10px;
}
.accordionMenu input[type=radio]:checked + label:after{
transform: rotate(90deg);
}
.accordionMenu input[type=radio]:checked + label + .content{
max-height: 2000px;
height: auto;
}
For More Tutorials Please Click Here
