---
title: "Accordion"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/zh-hant/components/accordion
---

# Accordion Component

 基於本機 HTML `和 **元素建構的垂直堆疊顯示面板。僅 CSS，無需 JavaScript — 完全鍵盤可訪問，螢幕閱讀器友好，動畫流暢。手風琴元件使用瀏覽器的本機公開小工具進行語意、高效能的使用者互動。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

  

| 班級                | 類型  | 描述              |
| ----------------- | --- | --------------- |
| accordion         | 根據  | 一組披露面板的包裝       |
| accordion-content | 修飾符 | 每個面板內的動畫內容區域    |
| accordion-flush   | 風格  | 去除邊框和圓角以獲得齊平的外觀 |

## 基本用法

  透過將

元素包裝在 div.accordion 中，建立具有獨佔開啟行為的折疊面板。在每個

中新增相同的 name 屬性，以確保一次只有一個面板保持開啟狀態 - 此行為由瀏覽器本機強制執行，無需 JavaScript。

## 齊平手風琴

  在 accordion 旁邊新增 accordion-flush 類別以刪除外部邊框和內邊距。此變體無縫整合到已經提供自己的視覺邊界和間距的卡片、模式、側邊欄選單或容器中。

```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>
```

## 初步開放

  將 open 屬性新增至

元素，以在頁面載入時顯示為展開狀態。使用者仍然可以關閉面板 - open 屬性只是設定初始視覺狀態，非常適合突出顯示重要資訊或常見問題。

```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>
```

## 獨立小組

  省略

元素中的 name 屬性，以允許同時開啟多個面板。每個面板獨立運行，不會影響其他面板，這對於顯示使用者可能想要一起比較或查看的補充資訊很有用。

```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>
```**

`