      
        <!-- 折り畳み展開ポインタ -->
      
        <div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
      
        <a style="cursor:pointer;">▼ クリックで展開</a>
      
        </div>
      
        <!--// 折り畳み展開ポインタ -->
      
        <!-- 折り畳まれ部分 -->
      
        <div id="open" style="display:none;clear:both;">
      
        <!--ここの部分が折りたたまれる＆展開される部分になります。
      
        自由に記述してください。-->
      
        </div>
      
        <!--// 折り畳まれ部分 -->

view raw oritatami_menu hosted with ❤ by GitHub

・2行目と8行目に"open"という文字列がありますが、ここは任意の同じ文字列を入れてください。 （※ただし同じページの他のid属性と被らないように注意してください）

・＜div＞＜/div＞で囲まれている9～12行目までが、展開表示or収納される部分です。画像を含めることもできます。

以上の行を追加するだけで手順は終了です。

展開表示機能をうまく使い、スッキリとした見やすいホームページにしましょう！

この記事を読んだ人はコチラも見ています

2018/03/16 02:35 同じようにやったらクリックしても展開されませんでしたが、4行目の</div>を13行目に移動させたらできました。ご紹介有難うございます。

2017/04/20 22:46 クリックすると展開表示する"折りたたみメニュー"を簡単に作る方法で、折りたたまれている部分に、閉じるボタンを入れているのですが、そこを押しても閉じるようにするにはどうしたら良いのでしょうか？

2017/04/20 22:44 教えていただきたいです(;o;)

2016/11/27 14:23 展開する部分にhttp://fukafuka295.jp/hp/hp_no3.htmlのページのスライドショーを書くと、なぜか画像が標示されません。なぜでしょうか？

2016/10/24 08:53 ↓ご紹介していただきありがとうございます！（投稿者）

2016/08/23 01:23 こちらのページで紹介させていただきました。　http://145.rei-yumesaki.net/article/クリックで開閉する多階層ツリー型リストの作り方.html　ありがとうございました！

2016/07/28 17:43 折り畳まれた状態の時は「クリックで展開」と表示し、展開された状態の時は「クリックで折り畳む」と表示する方法はありますか？

2016/07/28 01:46 メニューボタン以外（横の空白）をクリックしても開くのですがボタン部分のみのリンクにすることは可能でしょうか？

2016/06/30 22:38 どうしてでしょう……なぜか機能しません。

2016/06/27 21:56 簡単に導入できました！ありがとうございます！

2016/06/14 10:21 感動した何日もかかったのがあっという間にできた。

2016/06/05 00:00 ↓自己解決、無事できました。サイトが見やすくなりました。ありがとうございました！

2016/06/04 23:54 ２つ以上つくりたいのですがうまくいきません。2015/11/01 06:09と同じく１つめしか反応しません。どうしたらいいでしょうか？

2016/05/26 11:42 ↓ 折り畳みメニューのid属性が他の属性と被っていたり、CSSでスタイル指定されていないかどうか確認してみてください（投稿者）

2016/05/25 11:17 メニューの下に展開されない・・・なんでだろう。positionの問題かしら・・・・

2016/05/18 15:38 素晴らしい！

2016/05/18 15:01 めっちゃたすかりました！！！！！！

2016/02/17 14:34 やり方が分からなくてあきらめていたのに、あっさり出来ました！ありがとうございます。

2016/02/02 17:42 わかりやすくてとてもありがたいです。お借りします。

2016/01/29 01:19 お借りします。わかりやすい記述ありがとうございます！

2016/01/17 03:04 いくつか見た中で一番シンプルで分かりやすかったです。ありがとうございました

2016/01/13 18:48 利用させていただきました。大変分かりやすかったので、助かりました。ありがとうございました。

2016/01/11 14:59 chromeでは出来てIE11にすると出来ない・・・何でだろう

2015/12/30 15:04 ずっと探していました。本当にありがとうございます！！

2015/12/23 18:27 あら出来た！ありがとうございます

2015/12/23 18:25 なぜだ・・できない　「クリックで展開」の文字が出て、ポインタが手の形に変わるけど展開しない

2015/12/21 14:37 サイトがかっこよくなった。ありがとうございます！

2015/12/21 13:15 サイトがかっこよくなった。ありがとうございます！

2015/12/18 22:41 参考になりました。ありがとうございます！

2015/12/15 21:42 できましたー！ただ閉じるためのボタンを設置したくていろいろやりましたがわかりませんでした＞＜

2015/12/09 02:33 123あ

2015/11/30 14:40 泣いたありがとうございます

2015/11/06 08:58 やりたくても、やり方が分からなかったクリック表示が出来ました。分かりやすい説明、ありがとうございます！　二つ以上やっても、問題なく動作しました。

2015/11/01 06:09 2つ設置したら上のが開いて下のはクリックしても上のが開くだけなんですけど２つを別々に動かせないでしょうか？

2015/09/27 08:48 ↓現在試行錯誤中です。少々お待ちください(投稿者)

2015/07/06 12:08 ▼ 実装例①を開いたら②が閉じる。②を開いたら①が閉じるように出来ますでしょうか

2015/05/25 22:39 テスト

2015/05/25 22:15 テスト

2015/05/25 22:13 いいですね！

現在の人気記事はコチラ！

ご意見・ご質問等は掲示板へ！

コメントを公開されたくない場合はメッセージフォームへ！

ページ上部へ戻る

	<!-- 折り畳み展開ポインタ -->
	<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
	<a style="cursor:pointer;">▼ クリックで展開</a>
	</div>
	<!--// 折り畳み展開ポインタ -->

	<!-- 折り畳まれ部分 -->
	<div id="open" style="display:none;clear:both;">

	<!--ここの部分が折りたたまれる＆展開される部分になります。
	自由に記述してください。-->

	</div>
	<!--// 折り畳まれ部分 -->

クリックすると展開表示する"折りたたみメニュー"を簡単に作る方法

作成方法

関連記事はこちら

この記事を読んだ人はコチラも見ています

現在の人気記事はコチラ！