---
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/vi/components/accordion
---

# Accordion Component

 Bảng công bố được xếp chồng theo chiều dọc được xây dựng trên các phần tử HTML `<details>` và `<summary>` gốc. Chỉ CSS, không cần JavaScript — hoàn toàn có thể truy cập bằng bàn phím và thân thiện với trình đọc màn hình với hình ảnh động mượt mà. Thành phần accordion sử dụng tiện ích tiết lộ gốc của trình duyệt để tương tác với người dùng theo ngữ nghĩa và hiệu quả.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học           | Kiểu            | Sự miêu tả                                                   |
| ----------------- | --------------- | ------------------------------------------------------------ |
| accordion         | Căn cứ          | Trình bao bọc cho một nhóm bảng tiết lộ                      |
| accordion-content | Công cụ sửa đổi | Khu vực nội dung hoạt hình bên trong mỗi bảng                |
| accordion-flush   | Phong cách      | Loại bỏ các đường viền và các góc tròn để có giao diện phẳng |

## Cách sử dụng cơ bản

Tạo một đàn accordion có hành vi mở độc quyền bằng cách gói các phần tử `<details>` trong một `div.accordion`. Thêm thuộc tính `name` tương tự vào mỗi `<details>` để đảm bảo mỗi lần chỉ có một bảng mở — hành vi này được trình duyệt thực thi nguyên bản mà không yêu cầu JavaScript.

## Accordion xả nước

Thêm lớp `accordion-flush` cùng với `accordion` để loại bỏ viền ngoài và phần đệm. Biến thể này tích hợp hoàn toàn vào các thẻ, phương thức, menu thanh bên hoặc vùng chứa đã cung cấp ranh giới và khoảng cách trực quan của riêng chúng.

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

## Ban đầu mở

Thêm thuộc tính `open` vào phần tử `<details>` để hiển thị nó được mở rộng khi tải trang. Người dùng vẫn có thể đóng bảng điều khiển — thuộc tính `open` chỉ cần đặt trạng thái hình ảnh ban đầu, hoàn hảo để làm nổi bật thông tin quan trọng hoặc các câu hỏi thường gặp.

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

## Bảng độc lập

Bỏ qua thuộc tính `name` khỏi các phần tử `<details>` để cho phép nhiều bảng được mở đồng thời. Mỗi bảng hoạt động độc lập mà không ảnh hưởng đến những bảng khác, hữu ích trong việc hiển thị thông tin bổ sung mà người dùng có thể muốn so sánh hoặc đánh giá cùng nhau.

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