How To Create An Accordion Using Only Html And Css
Introduction
You may have seen the accordions on many websites in the form of expandable & collapsable menus, FAQs, article excerpts, lists, etc. Accordions are easy to create using HTML and CSS. So, In this article, we will learn how to create an accordion using only HTML and CSS.
What is an accordion?
The accordion menu is a UI, which typically consists of vertically stacked sections or panels, where each section acts as a header or a tab that when the user clicks on to expand or collapse its associated content.
When a section is expanded, its content becomes visible, while other sections remain collapsed, conserving space and reducing visual clutter. This interaction allows users to focus on specific sections of interest while hiding irrelevant or secondary information.
It is a very common element in responsive websites.
Read also: How to Create an Accordion Menu Using HTML, CSS and JavaScript
Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
When to use an accordion?
The accordion menu can be used in various scenarios. If you want to present categorized information in a compact and organized manner, you can use accordion.
So, here are the two important situations where an accordion menu can be used:
- Content Organization: When you have a large amount of content that needs to be grouped into categories or sections, an accordion menu helps in organizing and presenting the information in a structured way.
- FAQ Sections: Frequently Asked Questions (FAQ) sections often contain a list of questions and their corresponding answers. If you are interested in creating this type of accordion then here is the link to that article – FAQ Accordion Section Using HTML, CSS & JavaScript
- Tabs
- Dropdown Menus
- Scrollable Sections
- Show/Hide Content, etc
What can I use instead of an accordion on a website?
If you want to use any other element instead of the accordion on your website. There are several alternative elements you can consider. The choice depends on the specific needs of your content and user experience. Here are a few alternatives to an accordion menu:
How to create an accordion using only HTML and CSS?
So, let’s see How to create an accordion using only HTML and CSS?
Create the basic structure of the accordion using HTML
First, create your index.html file. Add HTML boilerplate.
Here as you can see inside the body tag, a div tag whose class name is “container” is our main container. Inside this container, we have an h2 tag.
We have label tags with class="accordion". Inside this, we have input tag type=’checkbox’. Then we have a div with class=”accordion__header” as our accordion header, and the div tag with class=”accordion__content” as an accordion content wrapper, inside this div we created h6 and p tags.
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container">
<h2>CHECKBOX ACCORDION</h2>
<div>
<label class="accordion">
<input type='checkbox'>
<div class="accordion__header">Lorem ipsum dolor sit amet</div>
<div class="accordion__content">
<h6>Lorem ipsum dolor sit amet,</h6>
<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</label>
<label class="accordion">
<input type='checkbox'>
<div class="accordion__header">Lorem ipsum dolor sit amet</div>
<div class="accordion__content">
<h6>Lorem ipsum dolor sit amet,</h6>
<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</label>
<label class="accordion">
<input type='checkbox'>
<div class="accordion__header">Lorem ipsum dolor sit amet</div>
<div class="accordion__content">
<h6>Lorem ipsum dolor sit amet,</h6>
<p>Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</label>
</div>
</div>
</body>
</html>Copy all the HTML code into your index.html file.
What is the HTML element for the accordion?
So, there is no specific HTML element for an accordion. However, accordions can be created using a combination of HTML and CSS or we can use JavaScript also to make advanced functionality. Typically, accordions are built using a combination of <div>, <button>, and <p> (or other appropriate tags) to structure and display the content.
Styling the accordion using CSS
Create a CSS file and give a name as style.css
In the CSS step, firstly we have imported Google font.
We have styled all the elements, we have added border, background color, margin, padding, text color, etc. Also, we have defined elements, width, height, font family, position, etc.
Read also: 15+ Best CSS Accordions
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,800);
* {
margin: 0px;
padding: 0px;
}
html, body {
background-color: #d1f2eb;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 800;
}
p {
color: black;
font-size: 14px;
}
.container {
display: table;
margin: 0 auto;
width: 80%;
}
h2 {
color: #1abc9c;
text-align: center;
margin: 20px 0;
}
.accordion {
display: block;
font-size: inherit;
margin: 0px;
position: relative;
}
.accordion input {
display: none;
position: absolute;
visibility: hidden;
left: 50%;
top: 50%;
z-index: 1;
}
.accordion__header {
background-color: #1abc9c;
border: 1px solid #15967d;
border-bottom-width: 0px;
color: #10715e;
cursor: pointer;
transition: background 0.2s;
padding: 20px;
position: relative;
z-index: 2;
}
.accordion__header:hover {
background-color: #17a98c;
color: white;
}
.accordion__header:hover:before, .accordion__header:hover:after {
background-color: white;
}
.accordion__header:before, .accordion__header:after {
background-color: #10715e;
content: '';
display: block;
position: absolute;
z-index: 3;
}
.accordion__header:before {
height: 2px;
margin-top: -1px;
top: 50%;
right: 20px;
width: 8px;
}
.accordion__header:after {
height: 8px;
margin-top: -4px;
top: 50%;
right: 23px;
width: 2px;
}
.accordion input:checked ~ .accordion__header {
background: #15967d;
border-color: #15967d;
color: white;
}
.accordion input:checked ~ .accordion__header:hover {
background-color: #2ca18a;
border-color: #15967d;
color: white;
}
.accordion input:checked ~ .accordion__header:before {
background-color: white;
}
.accordion input:checked ~ .accordion__header:after {
display: none;
}
.accordion:first-child .accordion__header {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.accordion:last-child .accordion__header {
border-bottom-width: 1px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.accordion:last-child input:checked ~ .accordion__header {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.accordion__content {
background-color: white;
border: 1px solid #1abc9c;
border-width: 0px 1px;
display: none;
padding: 20px;
}
.accordion input:checked ~ .accordion__content {
display: block;
}
.accordion:last-child .accordion__content {
border-bottom-width: 1px;
border-radius: 0px 0px 4px 4px;
}
.accordion__content h6 {
color: #1abc9c;
font-size: 18px;
margin-bottom: 5px;
}
Copy all the CSS code and paste it into your style.css file.
ADVERTISEMENT
Live preview of Accordion using HTML and CSS.
See the Pen Accordion using only HTML and CSS by Ashok | Frontend Developer (@thecoderashok) on CodePen.
ADVERTISEMENT
ADVERTISEMENT
Summary
Amazing we have successfully created and designed our Accordion using only HTML and CSS. Hope you understood all the steps to build this project and you have learned some new & unique things. Let us know your thoughts in the comment section or you can contact us directly.
ADVERTISEMENT
ADVERTISEMENT
