Learn how to create an accordion using HTML, CSS, and JavaScript in this comprehensive tutorial! In today’s web development world, the ability to create an accordion can significantly enhance user experience and improve content organization. Whether for FAQs, menus, or content sections, learning to create an accordion is a valuable skill.
Throughout this guide, you’ll discover how to create an accordion step by step:
- Setting up the HTML Structure: Learn how to structure your HTML to create an accordion widget that expands and collapses content sections efficiently.
- Styling with CSS: Explore creative CSS techniques to style your accordion, giving it a polished and modern appearance that seamlessly integrates with your website’s design.
- Adding Interactivity with JavaScript: Dive into JavaScript to implement interactive behavior for your accordion, allowing users to interact with content sections dynamically and intuitively.
By the end of this tutorial, you’ll be able to create an accordion that is fully functional and engaging for your website visitors. Mastering how to create an accordion will provide an intuitive way to present and organize your content effectively.
Create an Accordion using HTML, CSS & Javascript
If you want to create an Accordion Design using Design using HTML CSS & Javascript, you can follow the steps below to easily create an Accordion.
Step 1: First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.
HTML CODE:
<!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">
<title>How to create an Accordion using CSS & Javascript | Responsive FAQ accordion dropdown</title>
<!-- Roboto font -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="accordion-wrapper">
<div class="container">
<h2>Frequently Asked Questions</h2>
<ul class="accordions">
<li class="accordion-item">
<button class="accordion-button" aria-expanded="true">
<span class="accordion-title" >
what is an FAQ pages?
</span>
<span class="icon" aria-expanded="true"></span>
</button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptates, dolores sint quasi ex nemo tempora quis suscipit enim modi, accusantium obcaecati provident vero. Rem beatae tenetur quae! Consectetur, alias.</p>
</div>
</li>
<li class="accordion-item">
<button class="accordion-button" aria-expanded="false">
<span class="accordion-title" >
Why do you need an FAQ page?
</span>
<span class="icon" aria-expanded="true"></span>
</button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptates, dolores sint quasi ex nemo tempora quis suscipit enim modi, accusantium obcaecati provident vero. Rem beatae tenetur quae! Consectetur, alias.</p>
</div>
</li>
<li class="accordion-item">
<button class="accordion-button" aria-expanded="false">
<span class="accordion-title" >
Does it improves the user experience of a website?
</span>
<span class="icon" aria-expanded="true"></span>
</button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptates, dolores sint quasi ex nemo tempora quis suscipit enim modi, accusantium obcaecati provident vero. Rem beatae tenetur quae! Consectetur, alias.</p>
</div>
</li>
<li class="accordion-item">
<button class="accordion-button" aria-expanded="false">
<span class="accordion-title" >
What are the most frequently asked questions?
</span>
<span class="icon" aria-expanded="true"></span>
</button>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae voluptates, dolores sint quasi ex nemo tempora quis suscipit enim modi, accusantium obcaecati provident vero. Rem beatae tenetur quae! Consectetur, alias.</p>
</div>
</li>
</ul>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Step 2: Now, create a CSS file with the name style.css and paste the given codes into your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
/* Global css start */
*,
::after,
::before {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: 'Roboto', sans-serif;
background: #002bff;
}
/* Global css end */
.accordion-wrapper{
height: 100vh;
}
h2{
font-size: 40px;
color: #fff;
margin: 45px 0px;
text-align: center;
}
.accordions{
width: 524px;
margin: auto;
padding: 0px;
list-style: none;
}
.accordion-item{
margin-bottom: 10px;
}
.accordion-button{
position: relative;
background: #ffffff;
padding: 20px;
font-size: 20px;
border: none;
outline: none;
cursor: pointer;
width: 100%;
text-align: left;
}
.accordion-content{
background: #ffffff;
color: #000;
max-height: 0;
overflow: hidden;
padding: 0px 15px;
opacity: 0;
transition: opacity 200ms linear, max-height 200ms libear;
will-change: opacity, max-height;
}
.accordion-content p{
font-size: 1rem;
font-weight: 300;
margin: 20px 0px;
line-height: 24px;
}
.accordions button[aria-expanded=true]+.accordion-content{
opacity: 1;
max-height: 300px;
transition: all 200ms linear;
}
.accordions button[aria-expanded=true]{
border-bottom: 2px solid #002bff;
}
.accordions .icon{
position: absolute;
top: 20px;
right: 15px;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordions .icon:after,
.accordions .icon:before{
content: "";
position: absolute;
background: currentColor;
top: 9px;
left: 5px;
width: 10px;
height: 2px;
}
.accordions .icon:after{
top: 5px;
left: 9px;
width: 2px;
height: 10px;
}
.accordions button[aria-expanded=true] .icon:after{
width: 0;
}
Step 3: After then, Create a Javascript file with the name of app.js and paste the given codes in your Js file. Remember, you’ve to create a file with .js extension.
JAVASCRIPT CODE:
const items = document.querySelectorAll(".accordion-button");
function toggleAccordion(){
const itemToggle = this.getAttribute('aria-expanded');
for(i = 0; i < items.length; i++){
items[i].setAttribute('aria-expanded', 'false')
}
if(itemToggle == 'false'){
this.setAttribute('aria-expanded', 'true')
}
}
items.forEach(item => item.addEventListener('click', toggleAccordion))
