メインコンテンツへスキップ
Frutjam logo Frutjam
v2.2.5
Theme

アコーディオンコンポーネント

最終更新日:

ネイティブ <details>/<summary> を使用した CSS のみの Tailwind CSS アコーディオン。 JavaScript を使用せずにコンテンツ セクションを展開したり折りたたんだりできます。 WCAG AA にアクセス可能で、Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

ネイティブ HTML の <details> 要素と <summary> 要素に基づいて構築された、垂直に積み重ねられた開示パネル。 CSS のみで JavaScript は必要ありません。キーボードから完全にアクセスでき、スムーズなアニメーションを備えたスクリーン リーダーに優しいです。アコーディオン コンポーネントは、セマンティックでパフォーマンスの高いユーザー インタラクションのために、ブラウザーのネイティブ開示ウィジェットを使用します。

CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。

クラス タイプ 説明
accordionベース開示パネルのグループのラッパー
accordion-content修飾子各パネル内のアニメーションコンテンツエリア
accordion-flushスタイル境界線と丸い角を削除して、見た目をすっきりさせます

基本的な使い方

<details> 要素を div.accordion でラップして、排他的オープン動作を持つアコーディオンを作成します。同じ name 属性を各 <details> に追加して、一度に 1 つのパネルだけが開いたままになるようにします。この動作は、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 の横に accordion-flush クラスを追加して、外側の境界線とパディングを削除します。このバリアントは、独自の視覚的な境界と間隔をすでに提供しているカード、モーダル、サイドバー メニュー、またはコンテナーにシームレスに統合されます。

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>

最初に開いた状態

open 属性を <details> 要素に追加して、ページの読み込み時に展開して表示します。ユーザーは引き続きパネルを閉じた状態に切り替えることができます。open 属性は単に初期の視覚的な状態を設定するだけであり、重要な情報やよくある質問を強調表示するのに最適です。

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>

独立したパネル

複数のパネルを同時に開くことができるようにするには、<details> 要素から name 属性を省略します。各パネルは他のパネルに影響を与えることなく独立して動作するため、ユーザーが一緒に比較または検討したい補足情報を表示するのに役立ちます。

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>

Claude コード、Cursor、または別の AI エディターを使用していますか?

Cherry MCP は、AI エディタに正確な アコーディオン クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。

Cherry MCP を試してみる