「小項目があり過ぎて、全部表示するとゴチャゴチャして見づらくなってしまう！」
そんな時には、クリックすると中身を展開したり閉じたりすることのできる
"折り畳みメニュー"がとても役に立ちます！
そこで今回は、面倒なjavascript等の記述をせずに、htmlに数行追加するだけで簡単に実現することのできる方法を紹介します！
※ "折りたたみメニュー"の実装例は以下のようになります。
上記の実装例のように、リンクを含めた文字列を含めることもできますし、画像を表示させることもできます。 （展開ボタンの装飾はcssなどで自由に行ってください）
折り畳みメニューの簡単な作成方法
折り畳みメニューを作成したいhtmlの設置したい箇所に、以下の行を追加してください。
<!-- 折り畳み展開ポインタ -->
<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>
<!--// 折り畳まれ部分 -->
注意点
・2行目と8行目に"open"という文字列がありますが、ここは任意の同じ文字列を入れてください。 （※ただし同じページの他のid属性と被らないように注意してください）
・＜div＞＜/div＞で囲まれている9～12行目までが、展開表示or収納される部分です。画像を含めることもできます。
以上の行を追加するだけで手順は終了です。
展開表示機能をうまく使い、スッキリとした見やすいホームページにしましょう！
