今回の仕上がり
折りたたみを閉じるつもりでopen="false"と書いても、初めから中身が表示されます。detailsのopenは、文字列の値ではなく属性の有無で初期状態が決まる真偽属性です。
同じHTMLに属性なし・openあり・open="false"の3例を並べました。初期状態は順に閉・開・開です。各見出しを押すと、その例だけを開閉できます。表示用のJavaScriptは追加していません。
初期表示と開閉を試す
- 単独ページを開き、最初の例では本文が隠れ、残り2例では本文が見えることを比べます。
- 「open属性なし」の見出しへTabで移動します。Spaceを押すと本文が開きます。
- 同じ見出しでEnterを押すと閉じます。ほかの2例の状態は変わりません。
- 初期状態を見直すときはページを再読み込みします。
<details>
<summary>説明を開く</summary>
<p>補足の説明です。</p>
</details>
<!-- この書き方も開いた状態になります -->
<details open="false">…</details>summaryは閉じたときにも残る見出しです。クリックできる場所をdivで一から作らず、ブラウザが持つ開閉とキーボード操作を使っています。
HTMLと状態の見方
MDNのopenの説明でも、閉じるには属性自体を取り除く必要があると案内されています。ここで試したのはHTMLファイル中の属性です。ReactのJSXで真偽値を渡すopen={false}と、HTMLに文字列falseを書くことは区別してください。
開閉の状態をJavaScriptから読む場合はdetails.openが真偽値になります。今回はnameによるグループ化や開閉アニメーション、URLへの状態保存は扱っていません。長い説明を折りたためても、利用に必要な条件やエラーを見つけにくい場所へ隠さないよう、内容に応じて配置を選びます。
2026年10月21日、隔離したEdgeでPC・375px幅と明暗、Space・Enterでの開閉を確認。スマホ実機・全ブラウザ・読み上げは未確認です。最近のX投稿は取得できず、流行は確認していません。HTMLとCSSは編集部の自作・CC0です。キーボードだけでの確認もあわせて試せます。