open="false"でも開く?

次の3つはJavaScriptなしで開閉できます。見出しにTabで移動し、SpaceやEnterで切り替えてください。

open属性なし

閉じた状態で始まります。

open属性あり

開いた状態で始まります。

open="false"

値はfalseという文字列ですが、属性があるので開いた状態です。

比べるHTML

<details>…</details>
<details open>…</details>
<details open="false">…</details>

閉じた状態で始めたい場合は、open属性自体を外します。

自作HTML・CSS:CC0。nameによるグループ化やアニメーションは扱いません。