Accordion

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

アコーディオン要素を作成できるUIコンポーネントです。

<details> / <summary> ではなく、<div> / <button> ベースで構成されており、JavaScriptで開閉アニメーションを制御します。パネルには hidden="until-found" を活用しているため、アコーディオンが閉じた状態でもブラウザのページ内検索でコンテンツを検出でき、ヒット時に自動的にパネルが展開されます。

↓

Preview

Accordion Example 1

Accordion Example 2

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Heading>
      <Accordion.Button p="20">Accordion Example</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel p="20" pt="5">
      <DummyText length="l" />
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item bd-t>
    <Accordion.Heading>
      <Accordion.Button p="20">Accordion Example 2</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel p="20" pt="5">
      <DummyText length="l" />
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

How to use

@lism-css/ui パッケージでAccordionとして提供しています。

Import

import { Accordion } from '@lism-css/ui/react';

以下のコンポーネントが利用できます。

<Accordion.Root>: 複数のアコーディオンアイテムをラップするルート要素（Stack ベース）
<Accordion.Item>: 個別のアコーディオン要素
<Accordion.Heading>: 見出しエリアのラッパー（デフォルトは <div role="heading">）
<Accordion.Button>: 開閉トリガーのボタン（末尾に <Accordion.Icon> を自動で含みます）
<Accordion.Icon>: 開閉状態を示すアイコン（CSS疑似要素で描画）
<Accordion.Panel>: 開閉されるコンテンツパネル（hidden="until-found" を使用）

Props

プロパティ	説明
`<Accordion.Root>` `allowMultiple`	複数のアコーディオンを同時に展開できるようにします。デフォルトでは一つしか展開できません。
`<Accordion.Heading>` `as`	見出しのHTMLタグを指定します。デフォルトは `div`（`role="heading"` が自動付与されます）。`h2`〜`h6` を指定すると `role` は付与されません。
`<Accordion.Panel>` `flow`	パネル内のコンテンツ領域（`__content`）に渡すフローレイアウトの設定。

基本構造

<Accordion.Root>
  <Accordion.Item>
    <Accordion.Heading>
      <Accordion.Button>Accordion Label</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel p="20" pt="5">
      ...Contents...
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

<Accordion.Button> には、末尾に <Accordion.Icon> が自動的に配置されます。アイコンはCSSの疑似要素（::before / ::after）で描画されるため、SVGの指定は不要です。

ソースコード

ソースコードは GitHub で公開しています。

Examples

見出しタグを変更する

<Accordion.Heading> はデフォルトでは <div role="heading"> として出力されますが、as に h3 などの見出しタグを指定することで、実際の見出し要素として出力できます。

↓

例

<Accordion.Root bd>
  <Accordion.Item>
    <Accordion.Heading as="h3">
      <Accordion.Button p="20">Accordion Label</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel p="20" pt="5">
      <DummyText length="l" />
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item bd-t>
    <Accordion.Heading as="h3">
      <Accordion.Button p="20">Accordion Label</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel p="20" pt="5">
      <DummyText length="l" />
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

<div class="c--accordion l--stack">
  <div class="c--accordion_item">
    <h3 class="c--accordion_heading set--plain">
      <button class="c--accordion_button l--flex set--plain -g:10 -w:100% -ai:center -jc:between" aria-controls="{id}" aria-expanded="false">
        Accordion Label
        <span class="c--accordion_icon a--icon -pi:center -fxsh:0" aria-hidden="true"></span>
      </button>
    </h3>
    ...
  </div>
</div>

アニメーション時間を変更し、複数同時展開を許可する

アコーディオンの開閉アニメーションの速度は --duration 変数で管理されており、デフォルトは 0.25s です。

デフォルトでは、同じ <Accordion.Root> 内で一つのアコーディオンしか同時に展開できません。 allowMultiple を指定することで、複数を同時に展開できるようになります。

↓

Preview

Accordion Label 1

Accordion Label 2

Accordion Label 3

<Accordion.Root g="1px" allowMultiple>
  <Accordion.Item style={{ '--duration': '.15s' }}>
    <Accordion.Heading>
      <Accordion.Button p="20">Accordion Label 1</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel p="20" pt="5">
      ...
    </Accordion.Panel>
  </Accordion.Item>
  <Accordion.Item style={{ '--duration': '.15s' }}>
    <Accordion.Heading>
      <Accordion.Button p="20">Accordion Label 2</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel p="20" pt="5">
      ...
    </Accordion.Panel>
  </Accordion.Item>
  ...
</Accordion.Root>

<div class="c--accordion l--stack" data-allow-multiple>
  <div class="c--accordion_item" style="--duration: 0.15s">...</div>
  <div class="c--accordion_item" style="--duration: 0.15s">...</div>
  <div class="c--accordion_item" style="--duration: 0.15s">...</div>
</div>