Accordion（アコーディオン）

Accordion は、見出しを押すと中身が開いたり閉じたりする部品です。HTML の形、指定できる Props、開いた状態で始める方法などをまとめています。

Accordion（アコーディオン）は、見出しのボタンを押すと、その下の中身がなめらかに開いたり閉じたりする部品です。@lism-css/ui に入っています。開け閉めはスクリプト（JavaScript）で動かします。

どんなときに使う？#

よくある質問のように、見出しだけ並べて、読みたいところだけ開いてもらうとき
長い説明を、最初はたたんでおきたいとき

スクリプトを使わず CSS だけで開け閉めしたいなら、<details> 要素で作る Details を使います。

使い方#

b--accordion の中に、開け閉めする1組（b--accordion_item）を並べます。下の表示例の見出しを押してみてください。

表示例

見出し1

見出し2

html

<div class="b--accordion -bd">
  <div class="b--accordion_item">
    <div class="b--accordion_heading" role="heading" aria-level="3">
      <button class="b--accordion_button set--plain" aria-controls="demo-acc-1" aria-expanded="false">
        見出し1
        <span class="b--accordion_icon a--icon" aria-hidden="true"></span>
      </button>
    </div>
    <div class="b--accordion_panel" id="demo-acc-1" hidden="until-found">
      <div class="b--accordion_content l--flow">
        <p>1つめの中身です。</p>
      </div>
    </div>
  </div>
  <div class="b--accordion_item -bd-t">
    <div class="b--accordion_heading" role="heading" aria-level="3">
      <button class="b--accordion_button set--plain" aria-controls="demo-acc-2" aria-expanded="false">
        見出し2
        <span class="b--accordion_icon a--icon" aria-hidden="true"></span>
      </button>
    </div>
    <div class="b--accordion_panel" id="demo-acc-2" hidden="until-found">
      <div class="b--accordion_content l--flow">
        <p>2つめの中身です。</p>
      </div>
    </div>
  </div>
</div>

ボタンの aria-controls と、パネルの id には同じ名前を入れます。これで、どのボタンがどのパネルを開くかが決まります。名前はページの中で重ならないようにします。

補足

HTML だけで使うときは、見た目の style.css に加えて、動きのスクリプト accordion.js を読み込みます。読み込み方は UI コンポーネントの使い方にあります。

部品の名前#

クラス	役目
`b--accordion`	いちばん外の箱。全体をまとめる
`b--accordion_item`	見出しと中身の1組
`b--accordion_heading`	見出しの入れ物（ふつうは `<div role="heading">`）
`b--accordion_button`	押すと開け閉めするボタン
`b--accordion_icon`	開いているか閉じているかを示す印
`b--accordion_panel`	開け閉めされる部分
`b--accordion_content`	パネルの中で、余白を持つ中身の箱

印（b--accordion_icon）は CSS で2本の線を描いています。SVG（画像の形のデータ）を用意する必要はありません。閉じているときは「＋」、開くと縦の線が回って「−」になります。

ページ内検索で見つかる#

閉じたパネルには hidden="until-found" という HTML の属性が付いています。この属性の付いた部分は画面からは隠れますが、ブラウザのページ内検索（Ctrl+F）の対象には残ります。探した言葉がたたまれた中にあれば、そのパネルが勝手に開いて見つかった場所を見せてくれます。

枠と余白を付ける#

Property Class を足して見た目を整えます。ボタンと中身に -p:20 で余白を付け、2つめ以降の組に -bd-t（上の枠線）を付けると、区切りのある一覧になります。マウスを乗せたときの背景は -hov:-bgc と変数 --hov-bgc で決めます。

表示例

質問1

質問2

html

<div class="b--accordion -bd">
  <div class="b--accordion_item">
    <div class="b--accordion_heading" role="heading" aria-level="3">
      <button class="b--accordion_button set--plain -p:20 -hov:-bgc" style="--hov-bgc: var(--base-2)" aria-controls="demo-acc-3" aria-expanded="false">
        質問1
        <span class="b--accordion_icon a--icon" aria-hidden="true"></span>
      </button>
    </div>
    <div class="b--accordion_panel" id="demo-acc-3" hidden="until-found">
      <div class="b--accordion_content l--flow -p:20 -pt:15">
        <p>答え1です。</p>
      </div>
    </div>
  </div>
  <div class="b--accordion_item -bd-t">
    <div class="b--accordion_heading" role="heading" aria-level="3">
      <button class="b--accordion_button set--plain -p:20 -hov:-bgc" style="--hov-bgc: var(--base-2)" aria-controls="demo-acc-4" aria-expanded="false">
        質問2
        <span class="b--accordion_icon a--icon" aria-hidden="true"></span>
      </button>
    </div>
    <div class="b--accordion_panel" id="demo-acc-4" hidden="until-found">
      <div class="b--accordion_content l--flow -p:20 -pt:15">
        <p>答え2です。</p>
      </div>
    </div>
  </div>
</div>

パネルに余白を付けるときは、b--accordion_panel ではなく中の b--accordion_content に付けます。外側に付けると、閉じたときに余白だけが残ってしまうからです。

最初から開いておく#

最初から開いておきたい組は、次の3か所を変えます。

場所	閉じているとき	開いているとき
`b--accordion_item`	何も付けない	`data-opened` を付ける
`b--accordion_button`	`aria-expanded="false"`	`aria-expanded="true"`
`b--accordion_panel`	`hidden="until-found"`	`hidden` を付けない

表示例

最初から開いている

読み込んだときから見えています。

閉じている

html

<div class="b--accordion -bd">
  <div class="b--accordion_item" data-opened>
    <div class="b--accordion_heading" role="heading" aria-level="3">
      <button class="b--accordion_button set--plain" aria-controls="demo-acc-5" aria-expanded="true">
        最初から開いている
        <span class="b--accordion_icon a--icon" aria-hidden="true"></span>
      </button>
    </div>
    <div class="b--accordion_panel" id="demo-acc-5">
      <div class="b--accordion_content l--flow">
        <p>読み込んだときから見えています。</p>
      </div>
    </div>
  </div>
  <div class="b--accordion_item -bd-t">
    <div class="b--accordion_heading" role="heading" aria-level="3">
      <button class="b--accordion_button set--plain" aria-controls="demo-acc-6" aria-expanded="false">
        閉じている
        <span class="b--accordion_icon a--icon" aria-hidden="true"></span>
      </button>
    </div>
    <div class="b--accordion_panel" id="demo-acc-6" hidden="until-found">
      <div class="b--accordion_content l--flow">
        <p>押すと開きます。</p>
      </div>
    </div>
  </div>
</div>

いくつも同時に開けるようにする#

ふつうは、1つを開くとほかの組は閉じます（同じ b--accordion の中で、開けるのは1つだけ）。いくつも同時に開いたままにしたいときは、外の箱に data-allow-multiple を付けます。

html

<div class="b--accordion -bd" data-allow-multiple>
  <div class="b--accordion_item">...</div>
  <div class="b--accordion_item -bd-t">...</div>
</div>

見出しのタグを変える#

見出しの入れ物は、ふつう <div role="heading"> です。ページの見出しの順番に入れたいときは、<h3> などの本物の見出しタグにできます。そのときは role を付けず、set--plain（タグが最初から持つ見た目を消すクラス）を付けます。

html

<h3 class="b--accordion_heading set--plain">
  <button class="b--accordion_button set--plain" aria-controls="faq-1" aria-expanded="false">
    見出し
    <span class="b--accordion_icon a--icon" aria-hidden="true"></span>
  </button>
</h3>

開け閉めの速さを変える#

開け閉めにかかる時間は、変数 --duration で決まります。ふつうは 0.25s（0.25秒）です。外の箱（全体）か、1つの組（その組だけ）に指定します。

html

<div class="b--accordion -bd" style="--duration: 0.15s">...</div>

変数	意味	初期値
`--duration`	開け閉めの時間	`var(--acc-duration, 0.25s)`
`--acc-duration`	全体の開け閉めの時間（Details と共通）	指定なしなら `0.25s`

補足

パソコンやスマートフォンで「視差効果を減らす」（動きを減らす設定）をオンにしている人には、開け閉めの動きが 0 秒になります。スクリプトが動かない環境では、パネルはすべて開いた状態で表示されます。

React・Astro で書く場合#

コンポーネントでは Accordion を読み込み、.Root・.Item・.Heading・.Button・.Panel を組み合わせます。

jsx

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

<Accordion.Root bd>
  <Accordion.Item>
    <Accordion.Heading>
      <Accordion.Button>見出し1</Accordion.Button>
    </Accordion.Heading>
    <Accordion.Panel p="20">
      <p>中身</p>
    </Accordion.Panel>
  </Accordion.Item>
</Accordion.Root>

Astro では @lism-css/ui/astro/Accordion から読み込みます。<Accordion.Button> の最後には、印（<Accordion.Icon>）が自動で入ります。

コンポーネント	役目
`<Accordion.Root>`	全体の箱。並べ方が要るときは `layout="stack"` などを指定できる
`<Accordion.Item>`	見出しと中身の1組
`<Accordion.Heading>`	見出しの入れ物
`<Accordion.Button>`	開け閉めのボタン（印を自動で含む）
`<Accordion.Icon>`	開け閉めの印
`<Accordion.Panel>`	開け閉めされる中身

Props#

Props	付ける場所	何をするか
`allowMultiple`	`<Accordion.Root>`	いくつも同時に開けるようにする（ふつうは1つだけ）
`isOpen`	`<Accordion.Item>`	最初から開く（`data-opened` を付ける）
`as`	`<Accordion.Heading>`	見出しのタグ。初期値は `div`（`role="heading"` が付く）。`h2`〜`h6` にすると `role` は付かない
`isOpen`	`<Accordion.Button>`	最初の開き方に合わせて `aria-expanded` を決める
`as`	`<Accordion.Panel>`	外側のパネル（`b--accordion_panel`）のタグ。初期値は `div`
Lism Props	`<Accordion.Panel>`	`p`・`pt`・`flow` などは、内側の中身の箱（`b--accordion_content`）に付く
`isOpen`	`<Accordion.Panel>`	最初から中身を見せる（`hidden` を外す）

<Accordion.Panel> に渡したもののうち、as・class（Astro）・className（React）・accID・isOpen だけは外側のパネルに付きます。

補足

最初から開いておくときは、<Accordion.Item>・<Accordion.Button>・<Accordion.Panel> の3つすべてに isOpen を付けます。3つはそれぞれ別のこと（高さと印・aria-expanded・hidden）を受け持っているからです。

公式ドキュメント

Accordion

2026年10月5日時点の内容（lism-css 1.0.1・@lism-css/ui 0.40.1）をもとに、やさしい日本語でまとめています。

どんなときに使う？#

使い方#

部品の名前#

ページ内検索で見つかる#

枠と余白を付ける#

最初から開いておく#

いくつも同時に開けるようにする#

見出しのタグを変える#

開け閉めの速さを変える#

React・Astro で書く場合#

Props#

関連するページ#

公式ドキュメント