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

<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー

[coliss]

details要素にname属性を与えると、1つのウィジェットだけを開くことができる排他的アコーディオンを簡単に実装できます。

[flirt774]

排他的アコーディオンは、 https://u-site.jp/alertbox/accordions-on-desktop ここで指摘されてるとおり、複数の情報を組み合わせて理解する必要のある内容の場合は、避けた方が良いです。

[w_bonbon]

detail - summaryはなんとかこう、ネイティブCSSだけで開閉アニメーション可能にしてくれんか…。。

[kawaosa]

排他的アコーディオンをCSSだけで実現できる

[Helfard]

へー。

[sd-craft]

他を開いたからと言って閉じてないのに勝手に閉じないで欲しい

[toaruR]

押したところは動かないで欲しい、ただし下に開く場合は画面に留まる範囲で上にずれても良い、酔わない程度にアニメーションしてほしい、等々まー難しいよね(ノ∀`)

[strawberryhunter]

みなさん、アコーディオンは好きですか？私は大嫌いです。

[kijtra]

ios safari では動かないぽい

[deep_one]

「同じname属性を持つ複数の<details>要素はセマンティックなグループを形成し、排他的アコーディオンとして振る舞います」

[uunfo]

<details>を知らなかった。しかし全然summary じゃないなあ

[mohri]

サポートされてるブラウザにFirefoxが入ってないけど、手元のFirefox betaだと期待されたように動くな……なぜ？？