同じ name
を持つ複数の <details>
要素を使用して、排他的アコーディオンを作成します。
アコーディオン
ウェブでよく使用される UI パターンは、アコーディオン コンポーネントです。このコンポーネントは、個別に展開(または折りたたむ)ことでコンテンツを表示(または非表示にする)できる複数の開示ウィジェットで構成されています。
このパターンをウェブで実装するには、いくつかの <details>
要素を組み合わせ、通常は視覚的にグループ化して、それらが一緒に属していることを示します。
他にはないアコーディオン
対応ブラウザ
アコーディオン パターンのバリエーションとして、排他的アコーディオンがあります。このパターンでは、開示ウィジェットの 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>
1 つのページに排他的アコーディオンを複数設定できます。<details>
要素で新しい name
値を使用するたびに、新しい論理グループが作成されます。
排他的アコーディオンの一部である <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
イベントがトリガーされない場合があります。これらのブラウザでは、ポリフィル コードは何もしません。段階的な機能拡張の観点から、これは許容される動作です。