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:
领英推荐
?? 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.