このページは Cloud Translation API によって翻訳されました。

限定アコーディオン

同じ name を持つ複数の <details> 要素を使用して、排他的アコーディオンを作成します。

Bramus

アコーディオン

ウェブの一般的な UI パターンは、アコーディオンコンポーネントです。これは、複数の開示ウィジェットで構成されるコンポーネントで、個別に展開（または閉じる）してコンテンツを表示（または非表示）できます。

このパターンをウェブで実装するには、いくつかの <details> 要素を組み合わせ、通常は視覚的にグループ化して、それらが一緒に属していることを示します。

デモ: HTML と CSS によるアコーディオン。

限定アコーディオン

Browser Support

アコーディオンパターンのバリエーションとして、排他的アコーディオンがあります。このパターンでは、開示ウィジェットの 1 つだけを同時に開くことができます。

ウェブで排他的アコーディオンを作成するには、<details> 要素に name 属性を追加します。この属性を使用すると、同じ name 値を持つ複数の <details> 要素がセマンティックグループを形成し、排他的アコーディオンとして動作します。グループ内の <details> 要素のいずれかを開くと、以前に開いた要素は自動的に閉じます。

<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>

デモ: HTML と CSS を使用した独自のアコーディオン。

1 つのページに複数の排他的アコーディオンを含めることができます。<details> 要素で新しい name 値を使用するたびに、新しい論理グループが作成されます。

デモ: HTML と CSS による複数の排他的アコーディオン。

排他的アコーディオンの一部である <details> 要素は、必ずしも兄弟である必要はありません。ドキュメント全体に散らばっている場合があります。グループ化されるのは DOM の順序ではなく、name 属性です。

限定アコーディオンをポリフィルする

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

name を含む <details> 要素が開くと、name 属性の値が同じ他の開いている <details> 要素が検索され、閉じられます。

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");
          }
        });
    }
  });
});

古いバージョンのブラウザでは、この toggle イベントがトリガーされないことがあります。これらのブラウザでは、ポリフィルコードは何もしません。段階的な拡張の観点から、これは許容される動作です。