---
title: "Accordion"
type: component
version: "2.0.4"
doc_version: "2.0.4"
status: stable
date: 2026-03-11
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "JS-free Tailwind CSS Accordion using native HTML elements. Fully accessible and lightweight—supports flush, always-open, and multiple-open variants for FAQs."
url: https://frutjam.com/components/accordion
---

# Accordion Component

 Vertically stacked disclosure panels built on native HTML `<details>` and `<summary>` elements. CSS-only, no JavaScript required — fully keyboard accessible and screen-reader friendly with smooth animations. The accordion component uses the browser's native disclosure widget for semantic, performant user interactions.

| Class             | Type     | Description                                          |
| ----------------- | -------- | ---------------------------------------------------- |
| accordion         | Base     | Wrapper for a group of disclosure panels             |
| accordion-content | Modifier | Animated content area inside each panel              |
| accordion-flush   | Style    | Removes borders and rounded corners for a flush look |

## Basic Usage

Create an accordion with exclusive-open behavior by wrapping `<details>` elements in a `div.accordion`. Add the same `name` attribute to each `<details>` to ensure only one panel stays open at a time — this behavior is enforced natively by the browser without requiring JavaScript.

## Flush Accordion

Add the `accordion-flush` class alongside `accordion` to remove the outer border and padding. This variant integrates seamlessly into cards, modals, sidebar menus, or containers that already provide their own visual boundaries and spacing.

```html
<div class="accordion accordion-flush">
    <details name="accordion-flush">
        <summary>Email notifications</summary>
        <div class="accordion-content">
            <p>Receive updates about account activity, security alerts, and billing changes directly to your inbox.</p>
        </div>
    </details>
    <details name="accordion-flush">
        <summary>Push notifications</summary>
        <div class="accordion-content">
            <p>Get real-time alerts delivered directly to your device when important events occur.</p>
        </div>
    </details>
    <details name="accordion-flush">
        <summary>Marketing communications</summary>
        <div class="accordion-content">
            <p>Stay informed about new features, component releases, and tips from the Frutjam team.</p>
        </div>
    </details>
</div>
```


## Initially Open

Add the `open` attribute to a `<details>` element to display it expanded when the page loads. Users can still toggle panels closed — the `open` attribute simply sets the initial visual state, perfect for highlighting important information or frequently asked questions.

```html
<div class="accordion">
    <details name="initially-open" open>
        <summary>Is frutjam UI library built with Tailwind CSS?</summary>
        <div class="accordion-content">
            <p>Yes, frutjam is built with Tailwind CSS. The utility-first approach keeps components lightweight, highly customizable, and easy to integrate into any project.</p>
        </div>
    </details>
    <details name="initially-open">
        <summary>Are pre-built components included?</summary>
        <div class="accordion-content">
            <p>Yes. The library includes 30+ pre-built, responsive components to help you build interfaces faster and more efficiently.</p>
        </div>
    </details>
    <details name="initially-open">
        <summary>Does it work with JavaScript frameworks?</summary>
        <div class="accordion-content">
            <p>Absolutely. Frutjam is pure CSS and works seamlessly with React, Vue, Svelte, Angular, plain HTML, Django templates, and any other framework.</p>
        </div>
    </details>
</div>
```


## Independent Panels

Omit the `name` attribute from `<details>` elements to allow multiple panels to be open simultaneously. Each panel operates independently without affecting others, useful for displaying supplementary information that users may want to compare or review together.

```html
<div class="accordion">
    <details>
        <summary>Is Frutjam suitable for Django templates?</summary>
        <div class="accordion-content">
            <p>Yes. Frutjam integrates seamlessly with Django templates, enabling backend developers to add customizable, responsive UI components without building them manually.</p>
        </div>
    </details>
    <details>
        <summary>Does it reduce repetitive CSS?</summary>
        <div class="accordion-content">
            <p>Yes. Instead of writing utility classes for each element, you can use ready-made components — speeding up development and keeping your codebase clean.</p>
        </div>
    </details>
    <details>
        <summary>Are ready-made themes included?</summary>
        <div class="accordion-content">
            <p>Yes. Frutjam includes multiple themes you can switch between or customize to match your brand, creating a consistent look with minimal effort.</p>
        </div>
    </details>
</div>
```