これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます

Post on:2024年1月11日

アコーディオンの実装

Webページでよく使用されるUIパターンの一つに、アコーディオンのコンポーネントがあります。アコーディオンとは、個別にコンテンツを表示（または非表示）するために展開（または折りたたみ）できる複数のウィジェットで構成されるコンポーネントです。

アコーディオンを実装するには、<details>要素をいくつか組み合わせ、それらが同じコンポーネントであることを示すためにグループ化します。

下記のデモは、HTMLとCSSで実装したアコーディオンのコンポーネントです。
1, 2, 3, 4のをクリックすると、各コンテンツが表示されます。4つのウィジェットの展開（または折りたたみ）は独立しており、全部を表示することもできます。

See the Pen
Exclusive Accordion Demo 1/3: Accordion by coliss (@coliss)
on CodePen.

1つのウィジェットだけを開くことができる排他的アコーディオン

アコーディオンのバリエーションとして、1つのウィジェットだけを開くことができる排他的アコーディオン（The exclusive accordion）があります。

これは<details>要素でname属性が使用できるようになったからです。サポートブラウザは、Chrome 120, Edge 120, Safari 17.2です。
参考: <details> name attribute

実装は簡単で、<details>要素にname属性を与えます。同じname属性を持つ複数の<details>要素はセマンティックなグループを形成し、排他的アコーディオンとして振る舞います。つまり、<details>要素の1つを展開すると、他の展開していた要素は自動的に折りたたみます。

<details name="learn-css">
  <summary>Welcome to Learn CSS!</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Box Model</summary>
  <p>…</p>
</details>
<details name="learn-css">
  <summary>Selectors</summary>
  <p>…</p>
</details>

<summary>Welcome to Learn CSS!</summary>

…

</details>

<summary>Box Model</summary>

…

</details>

<summary>Selectors</summary>

…

</details>

実際の動作は、デモページでご覧ください。
1, 2, 3, 4のをクリックすると、各コンテンツが表示されます。4つのウィジェットの展開（または折りたたみ）は連動しており、1つを表示すると他は非表示になります。

See the Pen
Exclusive Accordion Demo 2/3: Exclusive Accordion by coliss (@coliss)
on CodePen.

この排他的アコーディオンは、ページ上に複数実装することができます。
<details>要素に新しいname属性を与えるたびに、新しい論理グループが形成されます。

See the Pen
Exclusive Accordion Demo 3/3: Exclusive Accordion by coliss (@coliss)
on CodePen.

排他的アコーディオンの一部である<details>要素は、必ずしも兄弟である必要はないことに注目してください。ドキュメント内に散在していても構いません。それらの<details>要素をグループ化するのはDOMの順序ではなく、name属性です。

排他的アコーディオンのポリフィル

下記のJavaScriptを使用すると、排他的アコーディオンの動作をポリフィルすることができます。コードは<details>要素のtoggleイベントに依存しています。

document.querySelectorAll("details[name]").forEach(($details) => {
  $details.addEventListener("toggle", (e) => {
    const name = $details.getAttribute("name");

    if (e.newState == "open") {
      document
        .querySelectorAll(`details[name=${name}][open]`)
        .forEach(($openDetails) => {
          if (!($openDetails === $details)) {
            $openDetails.removeAttribute("open");
          }
        });
    }
  });
});