クリックすると展開表示する「折りたたみメニュー」をHTMLで実装する方法

長すぎるページをコンパクトにしたい
ぱっと見で全体を把握できるようにしたい
使いにくいから概要だけ表示するようにしたい
一部のユーザー向けの補足情報を折りたたんでおきたい
項目がありすぎてごちゃごちゃしてみえるからスッキリさせたい

そんな場合は、クリックすることで開閉できる「折りたたみメニュー」を使いましょう。

ブログやウェブサイトにちょっと工夫することで、見やすく使いやすいウェブページになります。

実装例

任意の部分が折りたたまれて、ユーザーがクリックすると展開します。展開ボタンの装飾はCSSなどでご自由にカスタマイズしてください。

作成方法

折りたたみメニューを設置したい箇所に、以下のソースコードをコピペしてください。

折りたたむ部分にはリンクや画像も含むことができます。

2行目と8行目に「open」という文字列がありますが、ここは任意の同じ文字列を入力します。

※ただし、同じページの他のidと被らないように注意してください。
※「折りたたみメニュー」を複数設置する場合はそれぞれ別の文字列にしてください。
open2やopen3で大丈夫です。

以上で手順は終了です。

展開表示機能をうまく使って、スッキリとした見やすいウェブページを作りましょう。

サイトを見やすくすることで、ユーザーの離脱率を下げることができます。

コメント