How to Create an Interactive Accordion FAQ Section Using HTML, CSS, and JavaScript
JavaScript Developer WorldWide
Join the JavaScript Developers worldwide JavaScript Developers JavaScript Coders JavaScript Freelancers
A Frequently Asked Questions (FAQ) section is an essential part of any website, helping users find answers quickly without needing to contact support. An accordion-style FAQ section enhances user experience by displaying only the relevant answers when clicked, keeping the interface clean and organized.
In this blog post, we’ll build a simple Accordion FAQ Section using HTML, CSS, and JavaScript, where clicking on a question reveals or hides the corresponding answer.
✨ Features of Our FAQ Accordion
✔ Collapsible answers: Click a question to show or hide its answer. ✔ Sleek, minimalistic design: Clean layout with clear font styles. ✔ Smooth user experience: Keeps the page uncluttered by showing only the necessary information. ✔ Easy to customize and extend: You can easily add more questions and adjust styling.
📌 Step 1: Writing the HTML Structure
First, we create an HTML structure with three FAQ items. Each question is inside a <div class="question">, and its corresponding answer is inside a <div class="answer">.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accordion FAQ Section</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
max-width: 600px;
margin: auto;
background: #f9f9f9;
}
.accordion-item {
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.question {
background: #eee;
padding: 15px;
cursor: pointer;
font-size: 18px;
}
.answer {
padding: 15px;
display: none;
background: #fff;
font-size: 16px;
}
</style>
</head>
<body>
<h1>FAQ</h1>
<div class="accordion-item">
<div class="question">What is your return policy?</div>
<div class="answer">Our return policy lasts 30 days. If 30 days have gone by since your purchase, unfortunately we can’t offer you a refund or exchange.</div>
</div>
<div class="accordion-item">
<div class="question">How do I track my order?</div>
<div class="answer">Once your order has shipped, you will receive an email with a tracking number and link to track your package.</div>
</div>
<div class="accordion-item">
<div class="question">Can I purchase items again?</div>
<div class="answer">Yes, you can purchase items multiple times as long as they are in stock.</div>
</div>
</body>
</html>
🔍 Explanation:
📌 Step 2: Adding JavaScript for Interactivity
Now, let’s add JavaScript to toggle the answers when a question is clicked.
<script>
document.querySelectorAll(".question").forEach(question => {
question.addEventListener("click", function() {
const answer = this.nextElementSibling;
if (answer.style.display === "block") {
answer.style.display = "none";
} else {
answer.style.display = "block";
}
});
});
</script>
🔍 How It Works:
Recommended by LinkedIn
📌 Step 3: Enhancing User Experience with CSS Transitions
To make the FAQ section look smoother, we can add a CSS transition effect.
.answer {
padding: 15px;
display: none;
background: #fff;
font-size: 16px;
transition: max-height 0.3s ease-out;
overflow: hidden;
}
With this, the answer gradually expands instead of appearing suddenly.
🎨 Step 4: Adding Icons for Better UX
To indicate whether a section is open or closed, we can add icons dynamically in JavaScript.
Updated JavaScript:
<script>
document.querySelectorAll(".question").forEach(question => {
question.addEventListener("click", function() {
const answer = this.nextElementSibling;
const isOpen = answer.style.display === "block";
// Close all answers before opening a new one (optional)
document.querySelectorAll(".answer").forEach(a => a.style.display = "none");
// Toggle the current answer
answer.style.display = isOpen ? "none" : "block";
// Toggle active class for styling
this.classList.toggle("active");
});
});
</script>
🛠 Additional Features to Consider:
✅ Expand only one FAQ item at a time ✅ Use CSS animations instead of JavaScript toggles ✅ Store FAQs dynamically using JavaScript arrays
🎉 Conclusion
We’ve successfully built an interactive Accordion FAQ Section using HTML, CSS, and JavaScript. This feature is useful for help sections, documentation, or product FAQs on websites.