アコーディオン
stimeo--accordion
独立して開閉できる折りたたみセクション。ヘッダ間のフォーカス移動にも対応。
stimeo--accordion コントローラは WAI-ARIA の Accordion パターンを実装します。各ヘッダボタンは aria-controls でパネルと対応づき、複数のパネルを同時に開けます。状態はヘッダの aria-expanded とパネルの hidden 属性で表現されます。ライブラリは挙動のみを提供し、見た目はこの Playground 側が持ちます。
実行中
ご注文から2〜3営業日以内に発送いたします。
商品到着後30日以内は送料無料で返品を承ります。
1年間のメーカー限定保証が付帯します。
キーボード操作
| キー | 動作 |
|---|---|
| Enter / Space | フォーカス中のセクションを開閉する(ネイティブ button)。 |
| ↓ / ↑ | ヘッダ間でフォーカスを移動する(端で循環)。 |
| Home / End | 最初 / 最後のヘッダにフォーカスする。 |
<%# Markup for the accordion (APG Accordion) demo.
stimeo--accordion manages each header's aria-expanded and each panel's hidden,
and allows multiple panels open at once. Arrow keys move focus between headers.
Headers and panels are linked via aria-controls (= the panel's id), and each
panel (role="region") references its header button's id via aria-labelledby. %>
<div class="accordion" data-controller="stimeo--accordion">
<h3 class="accordion__header">
<button type="button" id="acc-shipping-trigger" class="accordion__trigger"
aria-expanded="false" aria-controls="acc-shipping"
data-stimeo--accordion-target="trigger"
data-action="click->stimeo--accordion#toggle
keydown->stimeo--accordion#onKeydown"><%= t(
"components.accordion.demo.shipping_title"
) %></button>
</h3>
<div class="accordion__panel" id="acc-shipping" role="region"
aria-labelledby="acc-shipping-trigger"
data-stimeo--accordion-target="panel" hidden>
<p><%= t("components.accordion.demo.shipping_desc") %></p>
</div>
<h3 class="accordion__header">
<button type="button" id="acc-returns-trigger" class="accordion__trigger"
aria-expanded="false" aria-controls="acc-returns"
data-stimeo--accordion-target="trigger"
data-action="click->stimeo--accordion#toggle
keydown->stimeo--accordion#onKeydown"><%= t(
"components.accordion.demo.returns_title"
) %></button>
</h3>
<div class="accordion__panel" id="acc-returns" role="region"
aria-labelledby="acc-returns-trigger"
data-stimeo--accordion-target="panel" hidden>
<p><%= t("components.accordion.demo.returns_desc") %></p>
</div>
<h3 class="accordion__header">
<button type="button" id="acc-warranty-trigger" class="accordion__trigger"
aria-expanded="false" aria-controls="acc-warranty"
data-stimeo--accordion-target="trigger"
data-action="click->stimeo--accordion#toggle
keydown->stimeo--accordion#onKeydown"><%= t(
"components.accordion.demo.warranty_title"
) %></button>
</h3>
<div class="accordion__panel" id="acc-warranty" role="region"
aria-labelledby="acc-warranty-trigger"
data-stimeo--accordion-target="panel" hidden>
<p><%= t("components.accordion.demo.warranty_desc") %></p>
</div>
</div>
/*
* Presentation-only styles for the accordion demo.
* Open/closed state is expressed via aria-expanded (set by the library).
*/
.accordion {
width: min(28rem, 100%);
border: 1px solid var(--border);
border-radius: 0.375rem;
}
.accordion__header {
margin: 0;
}
.accordion__trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.75rem 1rem;
font-size: 1rem;
text-align: left;
cursor: pointer;
background: var(--surface-card);
border: 0;
border-bottom: 1px solid var(--border);
}
/* Show "−" on open headers and "+" on closed ones. */
.accordion__trigger::after {
content: "+";
color: var(--muted);
}
.accordion__trigger[aria-expanded="true"]::after {
content: "\2212";
}
.accordion__panel {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border);
}
.accordion__panel:last-child,
.accordion__header:last-of-type .accordion__trigger {
border-bottom: 0;
}
このデモに固有の消費側 JS はありません(挙動はコントローラが担います)。
これらのスタイルは共通のデザイントークン(ライト/ダーク両対応)を使います。 共通スタイルも一緒にコピーし、ルート要素の data-theme を切り替えればダークになります。
このコンポーネントを動かすために HTML へ記述する data-* 属性です。ルート要素に下の data-controller を付け、その内側に各 target / value / action を配置します。
ルート要素に付与
data-controller="stimeo--accordion"
ターゲット
| 名前 | 説明 | 属性 |
|---|---|---|
trigger
必須
|
対応するパネルを開閉するヘッダーボタン。aria-controls でパネルと紐づく。 |
data-stimeo--accordion-target="trigger" |
panel
必須
|
トリガーの aria-controls が参照する折りたたみ領域。hidden 属性で状態を反映。 |
data-stimeo--accordion-target="panel" |
アクション
| 名前 | 説明 | アクション |
|---|---|---|
collapseAll
|
全パネルを一括で閉じる。任意の「すべて閉じる」操作にバインドする。 | stimeo--accordion#collapseAll |
expandAll
|
全パネルを一括で開く。任意の「すべて開く」操作にバインドする。 | stimeo--accordion#expandAll |
onKeydown
|
ヘッダー間でフォーカスを移動。ArrowDown/Up で循環、Home/End で先頭/末尾へ。 | stimeo--accordion#onKeydown |
toggle
|
操作したヘッダーのパネルを開閉し、aria-expanded と hidden を同期する。 |
stimeo--accordion#toggle |
状態フック
ライブラリが操作するのはこれらの ARIA / data 属性、カスタムプロパティだけです。見た目は利用側 CSS がこれらに反応して作ります([aria-selected] / [aria-expanded] / var(--stimeo--…) などのセレクタでフックします)。
| フック | 対象 | 意味 |
|---|---|---|
aria-expanded |
各ヘッダー | パネルが開いている間は "true"、閉じると "false"。 |
hidden |
各パネル | 開くと外れ、閉じると付与される。 |