同じ name
を持つ複数の <details>
要素で排他的なアコーディオンを作成します。
アコーディオン
ウェブでの一般的な UI パターンは、アコーディオン コンポーネントです。これは、コンテンツを表示(または非表示に)するために個別に展開(または折りたたみ)できる複数の開示ウィジェットで構成されるコンポーネントです。
このパターンをウェブに実装するには、いくつかの <details>
要素を組み合わせ、通常はそれらを視覚的にグループ化して、互いに関連があることを示します。
他にないアコーディオン
対応ブラウザ
- 120
- 120
- x
- 17.2
アコーディオン パターンのバリエーションに「排他アコーディオン」があります。このアコーディオンでは、開示ウィジェットの 1 つのみを同時に開くことができます。
これをウェブで実現するには、name
属性を <details>
要素に追加します。この属性を使用すると、同じ 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>
1 つのページには、複数の排他的アコーディオンを含めることができます。<details>
要素で新しい name
値を使用すると、新しい論理グループが作成されます。
排他的なアコーディオンの一部である <details>
要素は、必ずしも兄弟である必要はありません。ドキュメント内に散らばっていても問題ありません。グループ化するのは name
属性であり、DOM 順序ではありません。
専用アコーディオンをポリフィルする
次の 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
イベントが発生しません。このようなブラウザでは、ポリフィル コードは何も実行しません。プログレッシブ エンハンスメントの観点では、この動作は許容範囲です。