アコーディオン式メニューシンプル動作

見出し右端の記号は?

Web Page
Booskanium's Tips.
忘れっぽい落書き人のメモ

シンプルなアコーディオン式メニューです。JavaScriptは利用していません。HTMLとCSSのみで動作します。
使い方の想定は、左(または右)にアコーディンメニュー用のブロックを設置して、その横にコンテンツ用の枠ブロックを配置する場合に適しています。
スマホの場合は横幅がないことから、レスポンシブで横に並んだメニューとコンテンツ枠を縦に並べ、そのままではメニューが縦長で視野性が悪いことから、メニューを自動で折りたたみ、タップすると展開するようにしました。

サンプル

サンプル

サンプル