Accordion FAQ

FAQ Accordion section without using any javascript

This tailwind example is contributed by Ganesh Salunke, on 05-May-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 Ganesh Salunke

Tailwind v3.4 286 2

Fork Fullscreen

<div id="chart-wrapper" class="relative w-full h-full">
    
    <div id="info-box"
        class="absolute top-2 left-2 z-10 bg-black/70 text-white text-xs rounded-lg backdrop-blur-md">
        <ul >
            <li>
                <details class="group">
                    <summary
                        class="flex items-center gap-3 px-4 py-3 font-medium marker:content-none hover:cursor-pointer">
                        <svg class="w-5 h-5 text-gray-500 transition group-open:rotate-90"
                            xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                            viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z">
                            </path>
                        </svg>
                        <span>Stock details</span>
                    </summary>

<article class="px-4 pb-4">
                        <table>
                            <tr>
                                <td>Symbol:</td>
                                <td id="symbol"></td>
                            </tr>
                            <tr>
                                <td>Name:</td>
                                <td id="name"></td>
                            </tr>
                            <tr>
                                <td>Sector:</td>
                                <td id="sector"></td>
                            </tr>
                            <tr>
                                <td>SubSector:</td>
                                <td id="subsector"></td>
                            </tr>
                            <tr>
                                <td>ATR %ge:</td>
                                <td id="atr"></td>
                            </tr>
                            <tr>
                                <td>Action:</td>
                                <td id="action"></td>
                            </tr>
                            <tr>
                                <td>BB %ge:</td>
                                <td id="bb"></td>
                            </tr>
                            <tr>
                                <td>Score:</td>
                                <td id="score"></td>
                            </tr>
                        </table>
                    </article>
                </details>
            </li>
        </ul>
    </div>
</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.5k
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
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

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
Accordions & FAQs with css chevrons: No javascript needed
Chevron toggle without using nested SVG images.

Sherry Lynne

1 month ago

124
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k
FAQ with dropdown with Dark mode
Added dark mode and improved UI and Code quality

Dika Rahman

1 year ago

2.2k
Accordion block
FAQ accordion component, featuring expandable sections with smooth transitions and a clean, modern design

Maxim

1 year ago

2.8k