5丁目通信(仮称)

とある5丁目で活動する還暦を過ぎたWebプログラマーの覚え書きです。それとかかってくる迷惑電話や、家業のアパート経営について。

JavaScriptなしに見えないラジオボタンでアコーディオンメニューを実現していることに驚いた話し


10年以上前に他人が作成されたサイトのメンテナンス作業をやっています。

さて、そのサイトにはアコーディオンメニューがあるのですが、どうやって実現されているか理解できませんでした。labelタグとinputのラジオボタンがあるのですが、labelタグのメニュー項目を押すと、その下のdivで囲まれた下位のメニュー項目が表示されるようになっています。JavaScriptでコントロールされているようなこともありません。しかもJavaScript自体も存在していません。

そこで、Googleさんに「input radio accordion」で聞いてみました。そうしたら、ラジオボタンでアコーディオンメニューを実現するコードなんてあるのですね。

他にもいろいろ検索結果が出てくるので、この方法は定番テクニックなんですね。

アコーディオンメニューを実現していることを理解して、こちらがやりたいことを対応しました。

やりたいこととしては、アコーディオンメニューの下位のメニュー項目のページにアクセスしたときは、アコーディオンメニューを出たままにすることです。そうしないと、今のページがどこにあるのか迷子になってしまうからです。

シンプルに下位のページにアクセスしたときには、アコーディオンメニューの下位のメニュー項目を非表示になっていたのを表示にしただけす。このページに固有のIDを振って、CSSでまとめて強制表示にすればいいのですが、今回は簡単にページごとにCSSを設定しておきました。

以上、自分の考えの範疇だけでは実現できないことに驚いた話しでした。でも、わざわざラジオボタンを隠して、アコーディオンメニューのために設置しておくなんて気持ち悪いけど、これは定石な方法なのでしょうね。

技術評論社
¥1,980 (2024/11/20 15:28時点 | Amazon調べ)