FAQ Accordion
Home
Snippets
FAQ Accordion
HTML
CSS
JS
<h3>FAQs</h3> <div class="faq-item"> <div class="faq-question">What services do you provide?</div> <div class="faq-answer">We provide web development, SEO, and digital marketing services.</div> </div> <div class="faq-item"> <div class="faq-question">Do you offer custom websites?</div> <div class="faq-answer">Yes! We design and develop custom websites tailored to your needs.</div> </div>
body { font-family: Arial, sans-serif; padding: 20px; } .faq-item { margin-bottom: 10px; border: 1px solid #ccc; border-radius: 8px; } .faq-question { padding: 12px; background: #f4f4f4; cursor: pointer; font-weight: bold; } .faq-answer { display: none; padding: 12px; background: #fff; }
const questions = document.querySelectorAll(".faq-question"); questions.forEach(q => { q.addEventListener("click", () => { const answer = q.nextElementSibling; answer.style.display = answer.style.display === "block" ? "none" : "block"; }); });
Ad #1
Ad #2
Scroll to Top