超簡単な折りたたみ展開メニュー
サンプルは、このブログの右サイドバー「折りたたみメニュー」RSSリンクの表示。
クリック側は、onclick属性にてdisplayによる表示/非表示を制御。
展開側は、対応するidを書くだけで、スクリプトも使わず超簡単。
ソースはこんな感じ。
２箇所ある「xxxxx」の部分は任意の同じ文字列にする。
識別するだけなので「メニュー１」のように日本語でもたぶん大丈夫。
また、次のように記事中に使う事もできる。
▼クリックで展開▼
まぁ普通のブログであれば、予めシステムにある「read more」や「続きを読む」で事足りると思うけど、オリジナルカスタマイズにより「続きを読む」を別の用途で使っている場合にオプションとして使えるかな。
アレンジすれば、次のページの【商品をもっと見る】のような使い方もできる。
⇒ 卒業式袴 レンタル・貸衣装
ただし、複数の記事や複数のメニューなどに使う場合には注意すべき点がある。
たとえ記事ひとつに対して一つしか使ってないとしても、月別やカテゴリー別ページなどで、記事を複数件表示する設定の場合、ページによっては複数表示される事になる。
▼クリックで展開▼
クリック側は、onclick属性にてdisplayによる表示/非表示を制御。
展開側は、対応するidを書くだけで、スクリプトも使わず超簡単。
ソースはこんな感じ。
<!-- 折りたたみ -->
<div onclick="obj=document.getElementById('xxxxx').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">クリックで展開</a>
</div>
<!--// 折りたたみ -->
<!-- 折りたたまれ -->
<div id="xxxxx" style="display:none;clear:both;">
ここに書いたものが上述の「クリックで展開」をクリックすると表示される
</div>
<!--// 折りたたまれ -->
２箇所ある「xxxxx」の部分は任意の同じ文字列にする。
識別するだけなので「メニュー１」のように日本語でもたぶん大丈夫。
また、次のように記事中に使う事もできる。
▼クリックで展開▼
まぁ普通のブログであれば、予めシステムにある「read more」や「続きを読む」で事足りると思うけど、オリジナルカスタマイズにより「続きを読む」を別の用途で使っている場合にオプションとして使えるかな。
アレンジすれば、次のページの【商品をもっと見る】のような使い方もできる。
⇒ 卒業式袴 レンタル・貸衣装
ただし、複数の記事や複数のメニューなどに使う場合には注意すべき点がある。
たとえ記事ひとつに対して一つしか使ってないとしても、月別やカテゴリー別ページなどで、記事を複数件表示する設定の場合、ページによっては複数表示される事になる。
▼クリックで展開▼
FC2BLOGカスタマイズ - 関連記事
