Tailwind FAQ accordion

This tailwind example is contributed by yousef, on 02-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Frequently asked questions, QnA,collapsible

FAQ Accordion

Author yousef

Tailwind v3.4 6.2k 10

Fork Fullscreen

<div class="bg-[#F2F4FF] h-screen">
  <section class="max-w-5xl mx-auto py-10 sm:py-20">
    <div class="flex items-center justify-center flex-col gap-y-2 py-5">
      <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold">Frequently asked questions</h2>
      <p class="text-lg font-medium text-slate-700/70">Questions related to web hosting</p>
    </div>
    <div class="w-full px-7 md:px-10 xl:px-2 py-4">
      <div class="mx-auto w-full max-w-5xl border border-slate-400/20 rounded-lg bg-white">
        <div class="border-b border-[#0A071B]/10">
          <button class="question-btn flex w-full items-start gap-x-5 justify-between rounded-lg text-left text-lg font-bold text-slate-800 focus:outline-none p-5" data-toggle="answer-1"><span>What types of hosting plans do you offer?</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class=" mt-1.5 md:mt-0 flex-shrink-0 rotate-180 transform h-5 w-5 text-[#5B5675]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg></button>
          <div class="answer pt-2 pb-5 px-5 text-sm lg:text-base text-[#343E3A] font-medium" id="answer-1"
            style="display: none;">We offer shared hosting, VPS hosting, dedicated server hosting, and cloud hosting
            plans.</div>
        </div>
        <div class="border-b border-[#0A071B]/10">
          <button class="question-btn flex w-full items-start gap-x-5 justify-between rounded-lg text-left text-lg font-bold text-slate-800 focus:outline-none p-5" data-toggle="answer-2"><span>What is the uptime guarantee for your hosting services?</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class=" mt-1.5 md:mt-0 flex-shrink-0  h-5 w-5 text-[#5B5675]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg></button>
          <div class="answer pt-2 pb-5 px-5 text-sm lg:text-base text-[#343E3A] font-medium" id="answer-2"
            style="display: none;">We guarantee an uptime of 99.9% for all our hosting services.</div>
        </div>
        <div class="border-b border-[#0A071B]/10">
          <button class="question-btn flex w-full items-start gap-x-5 justify-between rounded-lg text-left text-lg font-bold text-slate-800 focus:outline-none p-5" data-toggle="answer-3"><span>Do you provide website migration assistance?</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class=" mt-1.5 md:mt-0 flex-shrink-0  h-5 w-5 text-[#5B5675]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg></button>
          <div class="answer pt-2 pb-5 px-5 text-sm lg:text-base text-[#343E3A] font-medium" id="answer-3"
            style="display: none;">Yes, we offer free website migration assistance for new customers.</div>
        </div>
        <div class="">
          <button class="question-btn flex w-full items-start gap-x-5 justify-between rounded-lg text-left text-lg font-bold text-slate-800 focus:outline-none p-5" data-toggle="answer-4"><span>What security measures do you have in place?</span><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" class=" mt-1.5 md:mt-0 flex-shrink-0  h-5 w-5 text-[#5B5675]" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M16.293 9.293 12 13.586 7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z"></path></svg></button>
          <div class="answer pt-2 pb-5 px-5 text-sm lg:text-base text-[#343E3A] font-medium" id="answer-4"
            style="display: none;">We employ advanced security measures including firewalls, DDoS protection, and
            regular security audits.</div>
        </div>
      </div>
    </div>
  </section>
</div>

buttons.forEach(button => {
      button.addEventListener('click', function() {
        const targetId = this.getAttribute('data-toggle');
        const target = document.getElementById(targetId);
        const isExpanded = target.style.display === 'block';

if (isExpanded) {
          target.style.display = 'none';
          this.querySelector('svg').classList.remove('rotate-180');
        } else {
          target.style.display = 'block';
          this.querySelector('svg').classList.add('rotate-180');
        }
      });
    });
  });
</script>

Related Examples

FAQ with dropdown
Created by Surjith S M -> https://twitter.com/surjithctly This component does not use javascript for dropdown

Abhijit Sen

3 years ago

18.5k
FAQ page

R Thapa

2 years ago

16.1k
Accordion
uses Flobite.js for interactivity

Piet Vriend

3 years ago

16.1k
FAQ Accordion Component
An interactive experience where users can click on questions to reveal or hide the corresponding answers.

King Kali

2 years ago

17.1k
Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

20.5k
FAQ section
An expanding frequently asked questions section made without using javascript.

Manuela Bianka

4 years ago

12.3k
FAQ cards
FAQ section with cards

Moriba Traore

3 years ago

14.5k
Accordion FAQ
quick and easy access to frequently asked questions related to insurance. It allows users to expand and collapse questions with answers.

Anonymous

2 years ago

10.6k
FAQ.
Super simple animated FAQ with tailwind group hoverable accordion open and close.

inbarajan P

2 years ago

2.9k
Accordion FAQ

Nikola Małecka

1 year ago

1.9k
Accordion
The Accordion is a responsive and reusable component designed to display collapsible content sections. It's perfect for FAQs, menu items, or any other grouped information. Each section can expand or collapse individually to show or hide content. Features: Mobile-friendly and fully responsive design. Smooth animation for opening and closing panels. Supports multiple or single panel expansion. Highly customizable with props for colors, fonts, and behavior (e.g., single/multiple open panels). Accessible with keyboard navigation and ARIA attributes.

Abhiraj

1 year ago

2.5k
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Rajesh Maheshwari

1 year ago

2k