要素でアコーディオンを簡単に実装できるが、懸念点は複数のウィジェットが個別に開閉してしまうことである。1つ目を開いて、2つ目を開くと、1つ目は開いたままである。1つ目を閉じるには、1つ目をクリックして閉じる必要があった。
しかし、要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができる。
アコーディオンを実装するには、要素をいくつか組み合わせ、それらが同じコンポーネントであることを示すためにグループ化する。
以下の例は、HTMLとCSSで実装したアコーディオンのコンポーネントである。1, 2, 3, 4をクリックすると、各コンテンツが表示される。4つのウィジェットの展開（または折りたたみ）は独立しており、全部を表示することもできる。
See the Pen Exclusive Accordion Demo 1/3: Accordion by coliss (@coliss) on CodePen.
1つのウィジェットだけを開くことができる排他的アコーディオン
要素にname属性を与える。同じname属性を持つ複数の要素はセマンティックなグループを形成し、排他的アコーディオンとして振る舞う。つまり、要素の1つを展開すると、他の展開していた要素は自動的に折りたたむ。
See the Pen Exclusive Accordion Demo 2/3: Exclusive Accordion by coliss (@coliss) on CodePen.
この排他的アコーディオンは、ページ上に複数実装することができる。
要素に新しいname属性を与えるたびに、新しい論理グループが形成される。
排他的アコーディオンの一部である要素は、必ずしも兄弟である必要はない。ドキュメント内に散在していても構わない。それらの要素をグループ化するのはDOMの順序ではなく、name属性である。
See the Pen Exclusive Accordion Demo 3/3: Exclusive Accordion by coliss (@coliss) on CodePen.
排他的アコーディオンのポリフィル
下記のJavaScriptを使用すると、排他的アコーディオンの動作をポリフィルすることができる。コードは要素のtoggleイベントに依存している。
あるnameを持つ要素が開くと、name属性に同じ値を持つ他の要素を見つけて閉じる。
古いバージョンの一部のブラウザでは、この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");
}
});
}
});
});