Accordion

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

基本構造

details.d--accordion
  summary.d--accordion__header.l--flex.-ai:c
    span.d--accordion__label.-fx:1 ...Header label...
    span.d--accordion__icon.-d:if
      svg.l--icon
  div.d--accordion__body.l--grid
    div.d--accordion__inner.-ov:h ...Contents...

実装方法について

details/summary を採用。
grid の 1fr を使ったトランジションで “height:100% がアニメーションできない問題” を解決。

CSS

Import

import { Accordion } from 'lism-css';

Props

プロパティ	説明
`<Accordion.Icon>` `icon`	内部で呼び出される`<Icon>` に渡す `icon` を指定できます。ただし、`<Accordion.Icon>`に子要素が配置されている場合は無視されます。
`<Accordion.Icon>` `isTrigger`	`data-role="trigger"` `button`タグでの出力となり`[data-role="trigger"]`が付与されます。

Usage

↓

Preview

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

<Accordion.Root p='20'>
  <Accordion.Header>
    <Accordion.Label>Accordion.Label</Accordion.Label>
    <Accordion.Icon/>
  </Accordion.Header>
  <Accordion.Body mbs='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

<details class="d--accordion -p:20">
  <summary class="d--accordion__header l--flex -ai:c">
    <span class="d--accordion__label -fx:1">Accordion.Label</span>
    <span class="d--accordion__icon -d:if">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="1em" height="1em" fill="currentColor" focusable="false" class="l--icon" aria-hidden="true"><path d="M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z"></path></svg>
    </span>
  </summary>
  <div class="d--accordion__body l--grid -mbs:20">
    <div class="d--accordion__inner -ov:h">
      <p>Lorem ipsum...</p>
    </div>
  </div>
</details>

↓

ラベルのHTMLタグをh3タグにする

<Accordion.Root p='20'>
  <Accordion.Header>
    <Accordion.Label tag='h3' f='inherit' fw='bold'>Accordion.Label</Accordion.Label>
    <Accordion.Icon/>
  </Accordion.Header>
  <Accordion.Body mbs='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

アイコンを変更する

<Accordion.Label>に指定するiconは、内部で<Icon>に渡されます。

↓

外部コンポーネントを指定する

import { CaretDoubleDown } from "@phosphor-icons/react";

<Accordion.Root p='20'>
  <Accordion.Header>
    <Accordion.Label>Accordion.Label</Accordion.Label>
    <Accordion.Icon icon={CaretDoubleDown}/>
  </Accordion.Header>
  <Accordion.Body mbs='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

アコーディオンの同時開閉を禁止する

複数の<Accordion.Root>(.d--accordion)を含む親要素に [data-accordion-multiple="disallow"]を指定すると、複数のアコーディオンを同時に開くことを禁止し、どれかが開くとその兄弟アコーディオンを閉じるようになります。

↓

Preview

Accordion.Label

<Stack g='1px' data-accordion-multiple='disallow'>
  <Accordion.Root>
    <Accordion.Header p='30' bgc='text' c='base'>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body p='30'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root>
    <Accordion.Header p='30' bgc='text' c='base'>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body p='30'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  ...
</Stack>

開閉トランジションの時間を変更する

アコーディオン用のトランジションは--trsdu--accで秒数を管理できます。

親要素に変数をセットすると一括管理できます。

↓

Preview

<Stack g='30' style={{'--trsdu--acc': '.2s'}}>
  <Accordion.Root bgc='base-2' bxsh='1' bdrs='3'>
    <Accordion.Header p='30'>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body p='30' bd='t' bdc='divider'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  <Accordion.Root bgc='base-2' bxsh='1' bdrs='3'>
    <Accordion.Header p='30'>
      <Accordion.Label>Accordion.Label</Accordion.Label>
      <Accordion.Icon/>
    </Accordion.Header>
    <Accordion.Body p='30' bd='t' bdc='divider'>
      <Dummy length='l' />
    </Accordion.Body>
  </Accordion.Root>
  ...
</Stack>

CSSで:rootの--acc-durationを上書きすると、デフォルトの開閉速度を変更できます。

Opt-in 機能

追加でCSSが必要な機能

開閉時のアイコンを分ける

追加で少しCSSを加える必要がありますが、開閉時にアイコンを切り替える例も紹介します。

↓

Example

<Accordion.Root p='20'>
  <Accordion.Header>
    <Accordion.Label>Accordion.Label</Accordion.Label>
    <Accordion.Icon>
      <Icon icon={{as:Plus, weight:'bold'}} />
      <Icon icon={{as:Minus, weight:'bold'}} />
    </Accordion.Icon>
  </Accordion.Header>
  <Accordion.Body mbs='20'>
    <Dummy length='l' />
  </Accordion.Body>
</Accordion.Root>

.d--accordion__icon {
  > .l--icon {
    grid-area: 1 / 1;
  }
  > .l--icon:nth-last-of-type(2) {
    opacity: var(--_isOpened, 0);
  }
  > .l--icon:nth-of-type(2) {
    opacity: var(--_notOpened, 0);
  }
}

アコーディオントリガーをアイコンのみにする

<Accordion.Icon> に isTrigger を指定すると、buttonタグでの出力となり[data-role="trigger"]が付与されます。
この時、アコーディオンを開閉するためのclickイベントは summary（アコーディオンヘッダー）全体ではなくアイコン部分に対して登録されます。

これにより、アコーディオンヘッダー内部のテキストリンクをクリックできるようになり、さらに以下に示すような追加CSSを適用することで、アイコン部分だけをクリックできるように制限することもできます。

↓

Preview

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

<Accordion.Root p='20'>
  <Accordion.Header trigger='icon'>
    <Accordion.Label><a href="#acc-innerlink">メニューリンク</a></Accordion.Label>
    <Accordion.Icon isTrigger bd bdrs='1' bgc='inherit' p='10' />
  </Accordion.Header>
  <Accordion.Body mbs='20'>...</Accordion.Body>
</Accordion.Root>

<details class="d--accordion -p:20">
  <summary class="d--accordion__header l--flex -ai:c">
    <span class="d--accordion__label -fx:1">Labelテキスト（<a href="#acc-innerlink">ヘルプリンク</a></span>
    <button class="d--accordion__icon -d:ig -bd: -bdrs:1 -bgc:inherit -p:10" data-role="trigger">
      <svg class="l--icon"...>...</svg>
    </button>
  </summary>
  <div class="d--accordion__body l--grid -mbs:20">
    <div class="d--accordion__inner -ov:h">...</div>
  </div>
</details>

上記の追加CSSを適用しても、Tabキーでのカーソル操作時におけるsummaryタグ全体の選択を回避することはできません。

スクリプトの処理の内容について

おおまかな処理ステップは以下の通りです。

d--accordion のsummary要素、または（data-role="trigger"があればその要素）にク対してリックイベント・トグルイベントを登録
クリック時、開閉状態に応じて、open属性と.-openedクラスを操作。
- アニメーションの終了を待ってから状態を確定する。
- アコーディオンが開く時、親要素にdata-accordion-multiple="disallow" があるかチェックし、あれば他の兄弟要素を閉じる。
トグル時の処理
- open属性と.-openedクラスが食い違った場合に修正。
イベント解除(コンポーネントのアンマウント時に登録イベントを解除。)