In this tutorial, I will show you how to create a stylish accordion using HTML, CSS and JavaScript. This tutorial provides a modern UI design and complete source code, guiding you step by step to create a functional and stylish accordion.
Introduction
Hey friends! today we’re talking into a cool project where we’ll build a well designed accordion from scratch using HTML, CSS and JavaScript. This accordion will be smooth and functional, allowing you effortlessly toggle sections open and closed.
Once you finish reading in this article, you’ll be able to see the accordion in action by hitting the “View Demo” button and checking it out yourself. This project promises to be super interesting and is a fantastic opportunity for beginner developers to improve their skills.
What is an Accordion?
An accordion is a UI component that hides and shows content when clicked. it is commonly used in FAQs, menus and content organization.
Why Use an Accordion?
Accordion component help in:
- Improving Readability – users can focus only on relevant content.
- Saving Space – reduce clutter on a webpage.
- Enhancing User Experience – provides a smooth interaction.
Requirements:
Essential Knowledge
HTML, CSS and JavaScript: Fundamental understanding for structuring, styling and adding functionality.
Required Tools
- Text Editors: visual Studio Code, Sublime Text or others.
- Web Browser: for testing purpose such as Google Chrome, Microsoft Edge, etc.
Full Code for a Stylish Accordion
From here, I will explain the code in detail to help you understand it as much as possible.
HTML Structure
Let me explain the code to understand it one by one.
<!DOCTYPE html> tells the browser this is an HTML5 document.
<html lang=”en”> sets the page language to English.
<head> Section(Meta, Title and Links).
<meta charset=”UTF-8″> ensures all characters are displayed correctly.
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″> makes sure the page scales properly on different devices.
<title> sets the title shown in the browser tab.
A Font Awesome link: “https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js” loads icons for better visuals.
<link rel=”stylesheet” href=”style.css”> links an external CSS file to style the page.
<body> Section(Main Content).
<div class=”accordion-header”> a header that users click to expand content.
<i class=”fa-solid fa-folder-open”> an icon that visually indicates expand action.
<div class=”accordion-content”> a content section that holds the text, initially hidden.
<script src=”script.js”></script> links an external JavaScript file to adding functionality.
This Html code creates an accordion with multiple sections. Copy the section below:
<!DOCTYPE html>
<html lang="en">
<!--coding by codeweave24-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylish Accordion- Codeweave24</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-header"><i class="fa-solid fa-code"></i> What is HTML? <span class="icon"><i class="fa-solid fa-chevron-down"></i></span></div>
<div class="accordion-content">
<p>HTML (HyperText Markup Language) is the standard language for structuring web pages. It uses elements like headings, paragraphs, images, and links to build webpages.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header"><i class="fa-solid fa-paint-brush"></i> What is CSS? <span class="icon"><i class="fa-solid fa-chevron-down"></i></span></div>
<div class="accordion-content">
<p>CSS (Cascading Style Sheets) is used for styling web pages. It controls colors, layouts, fonts, and animations, making websites visually appealing and responsive.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header"><i class="fa-solid fa-laptop-code"></i> What is JavaScript? <span class="icon"><i class="fa-solid fa-chevron-down"></i></span></div>
<div class="accordion-content">
<p>JavaScript is a programming language that adds interactivity to web pages. It enables features like animations, form validation, sliders, and much more.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header"><i class="fa-solid fa-folder-open"></i> Why use an Accordion? <span class="icon"><i class="fa-solid fa-chevron-down"></i></span></div>
<div class="accordion-content">
<p>Accordions help in organizing content efficiently, improve user experience by reducing clutter, and allow users to interact with only the relevant sections.</p>
</div>
</div>
<div class="accordion-item">
<div class="accordion-header"><i class="fa-solid fa-bolt"></i> How to make a website interactive? <span class="icon"><i class="fa-solid fa-chevron-down"></i></span></div>
<div class="accordion-content">
<p>To make a website interactive, use JavaScript with libraries like jQuery or frameworks like React. CSS animations and transitions also enhance interactivity.</p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS for Styling
Let me explain the CSS before copying the code to understand it step by step.
Page layout (Body):
1. The accordion is centered both horizontally and vertically using flexbox.
2. Ensures the design looks good on all screen with proper spacing.
Container (Accordion):
1. The accordion has a white background, rounded corners and a subtle shadow to keep the design clean and
modern.
2. Prevent accordion from getting too wide (max-width:700px).
Accordion Item:
1. Each section has rounded corners and is spaced out (margin-bottom: 8px).
Accordion Headers ( Clickable Section):
1. A blue gradient background is used to make the headers look stylish.
2. The text and arrow icon are well aligned using flexbox.
3. Adding hover effect that changes the background color when the mouse is over it.
Accordion Content (Hidden Until Clicked):
1. The content is hidden by default (Display: none;) and only appears when clicked.
2. The content has a light grey background with padding for better readability.
3. The content expands smoothly with an animation effect.
Arrow Icon (Indicator for Opening/Closing):
1. By default, the arrow points down and rotates 180 degrees when the section is opened.
This CSS makes the accordion look modern and stylish. Copy all the code in the section bellow:
body {
font-family: Arial, sans-serif;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 20px;
}
.accordion {
width: 100%;
max-width: 700px;
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}
.accordion-item {
margin-bottom: 8px;
border-radius: 12px;
overflow: hidden;
}
.accordion-header {
background: linear-gradient(135deg, #007bff, #0056b3);
color: #fff;
padding: 18px 20px;
cursor: pointer;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease-in-out;
border-radius: 12px;
}
.accordion-header:hover {
background: linear-gradient(135deg, #0056b3, #003f7f);
}
.accordion-content {
display: none;
padding: 18px;
background: #f8f9fa;
line-height: 1.6;
font-size: 16px;
border-radius: 0 0 12px 12px;
transition: all 0.3s ease-in-out;
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.05);
}
.icon {
transition: transform 0.3s ease-in-out;
font-size: 20px;
}
.accordion-item.active .icon {
transform: rotate(180deg);
}JavaScript for Functionality
This JavaScript make the accordion interactive by allowing only one section to open at a time while closing other. Let me explain step by step:
document.querySelectorAll(“.accordion-header”): selects all elements with the class .accordion-header.
.forEach(header =>{ …}): I apply an action to each header one by one.
header.addEventListener(“click”, function() {: this listens for a click event on each header. When header is clicked the function runs.
this.parentElement: finds the entire accordion item(header + content).
this.nextElementSibling: get the content section right after the header.
let isActive = item.classList.contains(“active”): This checks whether the section is already open. If it has “active”, that means the section is already expanded.
document.querySelectorAll(“.accordion-item”).forEach(i => { i.classList.remove(“active”); i.querySelector(“.accordion-content”).style.display = “none”; }); : This loops through all accordion sections. It removes the “active” class from every section. It hides the content (display: none) making sure only one stays open.
if (!isActive) { item.classList.add(“active”); content.style.display = “block”; }: Adds “active” marks it as open. Changes display: block- makes the content visible.
This JavaScript enables the toggle functionality. Copy all the code in the section bellow:
document.querySelectorAll(".accordion-header").forEach(header => {
header.addEventListener("click", function() {
let item = this.parentElement;
let content = this.nextElementSibling;
let isActive = item.classList.contains("active");
document.querySelectorAll(".accordion-item").forEach(i => {
i.classList.remove("active");
i.querySelector(".accordion-content").style.display = "none";
});
if (!isActive) {
item.classList.add("active");
content.style.display = "block";
}
});
});Final Output
Conclusion
In this tutorial, we built a stylish and functional accordion using HTML, CSS and JavaScript. We started by understanding what a accordion is and why it’s useful. Then walked through the full coding process: structuring it with HTML, styling it with CSS for a modern UI, and adding interactivity with JavaScript.
By following these steps, you’ve learned how to create a sleek, space saving component that enhances user experience. Whether you’re building an FAQ section, menu or organizing content, this accordion can be easily customized to fit your project. Keep learning and let me know if you have any question or ideas for future tutorial.
1 comment
[…] Generator using HTML, CSS and JavaScript. Circular Scroll Progress Bar Using HTML, CSS &… Stylish Accordion with HTML, CSS and JavaScript iPhone Calculator-Style with HTML, CSS & JavaScript (Complete… Responsive Navbar Using […]