Accordions & FAQs with css chevrons: No javascript needed

Chevron toggle without using nested SVG images.

This tailwind example is contributed by Sherry Lynne, on 04-Aug-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Frequently asked questions, QnA,collapsible

FAQ Accordion

Author Sherry Lynne

Tailwind v3.4 199

Fork Fullscreen

<div class="bg-white font-sans font-light w-screen h-screen py-2">
  <div class="p-6 mx-auto container text-lg max-w-3xl">    
    <h1 class="text-4xl lg:text-5xl xl:text-6xl font-light font-extralight mb-3">Accordions & FAQs</h1>
    <h2 class="text-2xl lg:text-3xl">FAQs, auto-numbering</h2>
    <div class="[counter-reset:my-counter] space-y-2">
      <details class="accordion w-full open:details-content:bg-white bg-neutral-100 border border-neutral-300 my-2 group">
        <summary class="relative text-base font-medium w-full text-sky-700 hover:text-sky-400 cursor-pointer group-open:bg-white flex gap-2 px-4 py-2">          
          <div class="pr-5 flex gap-2 [counter-increment:my-counter] before:[content:counter(my-counter)_'.'] after:absolute after:block after:border-solid after:w-2.5 after:h-2.5 after:content-['_'] after:top-2.5 after:right-4 after:transition after:duration-100 after:origin-center after:transition-transform after:shadow-[2px_2px] after:rotate-[45deg] group-open:after:rotate-[225deg] group-open:after:top-5">What is the purpose of an FAQ?</div>      
        </summary>
        <div class="px-4 py-3 bg-white">
          <p class="[&:not(:last-child)]:pb-4">
            FAQ pages can bring new visitors to your website via organic search and drive them quickly to related pages – most typically deeper blog pages and service pages closely related to the questions being resolved.
          </p>
        </div>
      </details>
      <details class="accordion w-full open:details-content:bg-white bg-neutral-100 border border-neutral-300 my-2 group">
        <summary class="relative text-base font-medium w-full text-sky-700 hover:text-sky-400 cursor-pointer group-open:bg-white flex gap-2 px-4 py-2">
          <div class="pr-5 flex gap-2 [counter-increment:my-counter] before:[content:counter(my-counter)_'.'] after:absolute after:block after:border-solid after:w-2.5 after:h-2.5 after:content-['_'] after:top-2.5 after:right-4 after:transition after:duration-100 after:origin-center after:transition-transform after:shadow-[2px_2px] after:rotate-[45deg] group-open:after:rotate-[225deg] group-open:after:top-5">Why are FAQ pages a priority?</div>
        </summary>
        <div class="px-4 py-3 bg-white">
          <p class="[&:not(:last-child)]:pb-4">
            FAQ pages continue to be a priority area for SEO and digital marketing professionals. An FAQ page is one of the simplest ways to improve your site and help site visitors and users. 
          </p>
        </div>
      </details>
      <details class="accordion w-full open:details-content:bg-white bg-neutral-100 border border-neutral-300 my-2 group">
        <summary class="relative text-base font-medium w-full text-sky-700 hover:text-sky-400 cursor-pointer group-open:bg-white flex gap-2 px-4 py-2">
          <div class="pr-5 flex gap-2 [counter-increment:my-counter] before:[content:counter(my-counter)_'.'] after:absolute after:block after:border-solid after:w-2.5 after:h-2.5 after:content-['_'] after:top-2.5 after:right-4 after:transition after:duration-100 after:origin-center after:transition-transform after:shadow-[2px_2px] after:rotate-[45deg] group-open:after:rotate-[225deg] group-open:after:top-5">Why do FAQ pages matter for SEO? 
            And how will this look in the FAQ is long enough to wrap more than line?</div>
        </summary> 
        <div class="px-4 py-3 bg-white">
          <p class="[&:not(:last-child)]:pb-4">
            They improve search visibility, build topical authority, and enhance the user experience.             
          </p>
          <p class="[&:not(:last-child)]:pb-4">
            They also reduce support costs, since FAQs can answer questions 24/7.          
          </p>
        </div>
      </details>
    </div>

<hr class="my-6 border-neutral-400">
    <h2 class="text-2xl lg:text-3xl mb-3">Single Disclosure, collapsed</h2>
    <div>
      <details class="w-full open:details-content:bg-white bg-neutral-100 border border-neutral-300 [&_+_&]:border-t-0 [&:not(details+details)]:mt-2 group">
        <summary class="relative text-base font-medium w-full text-sky-700 hover:text-sky-400 cursor-pointer group-open:bg-white flex gap-2 px-4 py-2">
          <div class="pr-5 flex after:absolute after:block after:border-solid after:w-2.5 after:h-2.5 after:content-['_'] after:top--2.5 after:right-4 after:transition after:duration-100 after:origin-center after:transition-transform after:shadow-[2px_2px] after:rotate-[45deg] group-open:after:rotate-[225deg] group-open:after:top-5">
            System Features
          </div>
        </summary>
        <div class="px-4 py-3 bg-white">
          <ul class="list-disc ml-4 [&:not(:last-child)]:pb-4">
            <li>Liquid Retina Displays: Vibrant, color-accurate screens with high pixel density and peak brightness options.</li>
            <li>All-Day Battery Life: Ranging from 16 to 24 hours depending on the specific Air or Pro model.</li>
            <li>Portability: Thin, durable aluminum construction weighing under 3 pounds</li>
          </ul>
        </div>
      </details>
    </div>
    <hr class="my-6 border-neutral-400">
    <h2 class="text-2xl lg:text-3xl">Accordion, first item expanded</h2>
    <details open class="w-full open:details-content:bg-white bg-neutral-100 border border-neutral-300 [&_+_&]:border-t-0  [&:not(details+details)]:mt-2 group">
      <summary class="relative text-base font-medium w-full text-sky-700 hover:text-sky-400 cursor-pointer group-open:bg-white flex gap-2 px-4 py-2">
        <div class="pr-5 flex gap-2 after:absolute after:block after:border-solid after:w-2.5 after:h-2.5 after:content-[''] after:top--2.5 after:right-4 after:transition after:duration-100 after:origin-center after:transition-transform after:shadow-[2px_2px] after:rotate-[45deg] group-open:after:rotate-[225deg] group-open:after:top-5">
          Weather in London
        </div>
      </summary>
      <div class="px-4 py-3 bg-white">
        <ul class="list-disc ml-4  [&:not(:last-child)]:pb-4">
          <li>24 °C</li>
          <li>Humidity: 26%</li>
          <li>Wind: 2 km/h</li>
        </ul>
      </div>
    </details>
    <details class="w-full open:details-content:bg-white bg-neutral-100 border border-neutral-300 [&_+_&]:border-t-0  [&:not(details+details)]:mt-2 group">
      <summary class="relative text-base font-medium w-full text-sky-700 hover:text-sky-400 cursor-pointer group-open:bg-white flex gap-2 px-4 py-2">
        <div class="pr-5 flex gap-2 after:absolute after:block after:border-solid after:w-2.5 after:h-2.5 after:content-['_'] after:top--2.5 after:right-4 after:transition after:duration-100 after:origin-center after:transition-transform after:shadow-[2px_2px] after:rotate-[45deg] group-open:after:rotate-[225deg] group-open:after:top-5">
          Weather in New York
        </div>
      </summary>
      <div class="px-4 py-3 bg-white">
        <ul class="list-disc ml-4 [&:not(:last-child)]:pb-4">
          <li>27 °C</li>
          <li>Humidity: 65%</li>
          <li>Wind: 5 km/h</li>
        </ul>
      </div>
    </details>
    <details class="w-full open:details-content:bg-white bg-neutral-100 border border-neutral-300 [&_+_&]:border-t-0 [&:not(details+details)]:mt-2 group">
      <summary class="relative text-base font-medium w-full text-sky-700 hover:text-sky-400 cursor-pointer group-open:bg-white flex gap-2 px-4 py-2">
        <div class="pr-5 flex gap-2 after:absolute after:block after:border-solid after:w-2.5 after:h-2.5 after:content-['_'] after:top--2.5 after:right-4 after:transition after:duration-100 after:origin-center after:transition-transform after:shadow-[2px_2px] after:rotate-[45deg] group-open:after:rotate-[225deg] group-open:after:top-5">
          Weather in Hong Kong
        </div>
      </summary>
      <div class="px-4 py-3 bg-white">
        <ul class="list-disc ml-4  [&:not(:last-child)]:pb-4">
          <li>26 °C</li>
          <li>Humidity: 89%</li>
          <li>Wind: 19 km/h</li>
        </ul>
      </div>
    </details>
    <hr class="my-6 border-neutral-400">
  </div>
</div>

Related Examples

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

Manuela Bianka

4 years ago

12.3k
Accordion FAQ
FAQ Accordion section without using any javascript

Sophia Baker

3 years ago

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

King Kali

3 years ago

17.2k
Tailwind FAQ accordion

yousef

2 years ago

6.2k
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

2k
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.7k
Frequently Asked Questions
A beautiful and modern accordion FAQ component using HTML & Tailwind CSS with smooth animations.

Rajesh Maheshwari

1 year ago

2.2k
Accordion FAQ
FAQ Accordion section without using any javascript

Ganesh Salunke

6 months ago

306
for qution and answer
this is i made for qution and ans and referense from etsnote.com

Omer fils ELENGA

1 month ago

13
for qution and answer
this is i made for qution and ans and referense from etsnote.com

Nirav Patel

2 years ago

3.2k
Pricing component luxuries
A modern, luxurious, and elegant pricing component with HTML and Tailwind CSS.

Alif Bima Pradana

9 months ago

911