Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Accordion Component

CSS-only Tailwind CSS accordion using native

/. Expand and collapse content sections with zero JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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ả
accordionCăn cứTrình bao bọc cho một nhóm bảng tiết lộ
accordion-contentCông cụ sửa đổiKhu vực nội dung hoạt hình bên trong mỗi bảng
accordion-flushPhong cáchLoạ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.

Is frutjam library suitable for use in commercial projects?

Yes, frutjam library is open source and free for both personal and commercial use.

Is frutjam library accessible for screen readers?

The frutjam library follows WAI-ARIA guidelines, including appropriate roles and keyboard navigation support, making it accessible to all users.

Does PageSpeed performance improve when using Frutjam?

Yes. Frutjam uses a CSS-first approach to avoid render-blocking JavaScript. It follows W3C standards, proper color contrast, and native HTML semantics — all contributing to better Core Web Vitals and PageSpeed scores.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div class="accordion">
    <details name="default-accordion">
        <summary>Is frutjam library suitable for use in commercial projects?</summary>
        <div class="accordion-content">
            <p>Yes, frutjam library is open source and free for both personal and commercial use.</p>
        </div>
    </details>
    <details name="default-accordion">
        <summary>Is frutjam library accessible for screen readers?</summary>
        <div class="accordion-content">
            <p>The frutjam library follows WAI-ARIA guidelines, including appropriate roles and keyboard navigation support, making it accessible to all users.</p>
        </div>
    </details>
    <details name="default-accordion">
        <summary>Does PageSpeed performance improve when using Frutjam?</summary>
        <div class="accordion-content">
            <p>Yes. Frutjam uses a CSS-first approach to avoid render-blocking JavaScript. It follows W3C standards, proper color contrast, and native HTML semantics — all contributing to better Core Web Vitals and PageSpeed scores.</p>
        </div>
    </details>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div className="accordion">
    <details name="default-accordion">
        <summary>Is frutjam library suitable for use in commercial projects?</summary>
        <div className="accordion-content">
            <p>Yes, frutjam library is open source and free for both personal and commercial use.</p>
        </div>
    </details>
    <details name="default-accordion">
        <summary>Is frutjam library accessible for screen readers?</summary>
        <div className="accordion-content">
            <p>The frutjam library follows WAI-ARIA guidelines, including appropriate roles and keyboard navigation support, making it accessible to all users.</p>
        </div>
    </details>
    <details name="default-accordion">
        <summary>Does PageSpeed performance improve when using Frutjam?</summary>
        <div className="accordion-content">
            <p>Yes. Frutjam uses a CSS-first approach to avoid render-blocking JavaScript. It follows W3C standards, proper color contrast, and native HTML semantics — all contributing to better Core Web Vitals and PageSpeed scores.</p>
        </div>
    </details>
</div>

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.

Email notifications

Receive updates about account activity, security alerts, and billing changes directly to your inbox.

Push notifications

Get real-time alerts delivered directly to your device when important events occur.

Marketing communications

Stay informed about new features, component releases, and tips from the Frutjam team.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<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.

Is frutjam UI library built with Tailwind CSS?

Yes, frutjam is built with Tailwind CSS. The utility-first approach keeps components lightweight, highly customizable, and easy to integrate into any project.

Are pre-built components included?

Yes. The library includes 30+ pre-built, responsive components to help you build interfaces faster and more efficiently.

Does it work with JavaScript frameworks?

Absolutely. Frutjam is pure CSS and works seamlessly with React, Vue, Svelte, Angular, plain HTML, Django templates, and any other framework.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<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.

Is Frutjam suitable for Django templates?

Yes. Frutjam integrates seamlessly with Django templates, enabling backend developers to add customizable, responsive UI components without building them manually.

Does it reduce repetitive CSS?

Yes. Instead of writing utility classes for each element, you can use ready-made components — speeding up development and keeping your codebase clean.

Are ready-made themes included?

Yes. Frutjam includes multiple themes you can switch between or customize to match your brand, creating a consistent look with minimal effort.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<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>