アコーディオン

項目ヘッダーをクリックして、個別に表示できる項目のリストを作成します。

使用法

アコーディオンコンポーネントは、uk-accordion属性を持つ親コンテナと、各アコーディオン項目のタイトルとコンテンツ部分で構成されます。

クラス	説明
`.uk-accordion-title`	各アコーディオン項目のトグルを定義してスタイルを設定します。`<a>`要素を使用します。
`.uk-accordion-content`	各アコーディオン項目のコンテンツ部分を定義します。

<ul uk-accordion>
    <li>
        <a class="uk-accordion-title" href></a>
        <div class="uk-accordion-content"></div>
    </li>
</ul>

- 項目 1
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- 項目 2
  
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
- 項目 3
  
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

<ul uk-accordion>
    <li class="uk-open">
        <a class="uk-accordion-title" href>Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

折りたたまない

デフォルトでは、すべてのアコーディオン項目を折りたたむことができます。この動作を防止して、常に1つの項目を開いたままにするには、collapsible: falseオプションを属性に追加します。

<ul uk-accordion="collapsible: false">…</ul>

- 項目 1
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- 項目 2
  
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
- 項目 3
  
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

<ul uk-accordion="collapsible: false">
    <li>
        <a class="uk-accordion-title" href>Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

複数の項目を開く

1つの項目を開いたときに他の項目が折りたたまれないようにして、複数のコンテンツセクションを同時に表示するには、multiple: trueオプションをuk-accordion属性に追加します。

<ul uk-accordion="multiple: true">…</ul>

- 項目 1
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- 項目 2
  
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
- 項目 3
  
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

<ul uk-accordion="multiple: true">
    <li class="uk-open">
        <a class="uk-accordion-title" href>Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

開く項目を設定する

最初に開く項目を指定するには、.uk-openクラスを項目に追加します。これを使用して複数の項目を開くこともできます。必ずmultiple: trueオプションをuk-accordion属性に追加してください。

注または、active: <index>オプションをuk-accordion属性に追加して、単一の項目を開くことができます。例：active: 1は2番目の要素を表示します（インデックスはゼロベースです）。これはuk-openクラスを上書きすることに注意してください。

<ul uk-accordion>
    <li></li>
    <li class="uk-open"></li>
    <li></li>
</ul>

- 項目 1
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
- 項目 2
  
  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.
- 項目 3
  
  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.

<ul uk-accordion>
    <li>
        <a class="uk-accordion-title" href>Item 1</a>
        <div class="uk-accordion-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li class="uk-open">
        <a class="uk-accordion-title" href>Item 2</a>
        <div class="uk-accordion-content">
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit.</p>
        </div>
    </li>
    <li>
        <a class="uk-accordion-title" href>Item 3</a>
        <div class="uk-accordion-content">
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat proident.</p>
        </div>
    </li>
</ul>

コンポーネントオプション

これらのオプションのいずれかをコンポーネント属性に適用できます。複数のオプションをセミコロンで区切ります。詳細はこちら

オプション	値	デフォルト	説明
`active`	数値	`false`	最初に開く要素のインデックス。
`animation`	ブール値	`true`	項目を直接表示するか、トランジションを使用して表示します。
`collapsible`	ブール値	`true`	すべての項目を閉じることができるようにします。
`content`	文字列	`> .uk-accordion-content`	アコーディオンコンテンツ要素を選択するコンテンツセレクター。
`duration`	数値	`200`	ミリ秒単位のアニメーション時間。
`multiple`	ブール値	`false`	複数の項目を開くことができるようにします。
`targets`	文字列	`> *`	切り替える要素のCSSセレクター。
`toggle`	文字列	`> .uk-accordion-title`	アコーディオン項目を切り替えるトグルセレクター。
`transition`	文字列	`ease`	項目を表示するときに使用するトランジション。イージング関数のキーワードを使用します。
`offset`	数値	`0`	スクロールトップに追加されるピクセルオフセット。

JavaScript

JavaScriptコンポーネントの詳細はこちらをご覧ください。

初期化

UIkit.accordion(element, options);

イベント

このコンポーネントがアタッチされた要素で次のイベントがトリガーされます

名前	説明
`beforeshow`	項目が表示される前に発生します。イベントで`preventDefault()`を呼び出すことで表示を防止できます。
`show`	項目が表示された後に発生します。
`shown`	項目の表示アニメーションが完了した後に発生します。
`beforehide`	項目が非表示になる前に発生します。イベントで`preventDefault()`を呼び出すことで非表示を防止できます。
`hide`	項目の非表示アニメーションが開始された後に発生します。
`hidden`	項目が非表示になった後に発生します。

メソッド

コンポーネントで使用できる次のメソッドがあります

トグル

UIkit.accordion(element).toggle(index, animate);

コンテンツペインを切り替えます。

名前	タイプ	デフォルト	説明
`index`	文字列、数値、ノード	0	切り替えるアコーディオンペイン。0から始まるインデックス。
`animate`	ブール値	true	falseを渡して、オープニングアニメーションを抑制します。

アクセシビリティ

アコーディオンコンポーネントは、アコーディオンWAI-ARIAデザインパターンに準拠しており、適切なWAI-ARIAロール、ステート、プロパティを自動的に設定します。

タイトルにはID、buttonロール、aria-expandedステート、およびそれぞれのコンテンツのIDに設定されたaria-controlsプロパティがあります。
コンテンツにはID、regionロール、およびそれぞれのタイトルのIDに設定されたaria-labelledbyプロパティがあります。

キーボード操作

アコーディオンコンポーネントには、次のキーを使用してキーボードからアクセスできます。

tabキーまたはshift+tabキーは、アコーディオンのタイトルを移動します。
enterキーまたはspaceキーは、フォーカスされたタイトルのコンテンツを切り替えます。

ドキュメント

アコーディオン