コンピュータ・インターネットノウハウをみんなで自由に編集し合える!

超簡単な折りたたみ展開メニュー コンピュータ・インターネット

サンプルは、このブログの右サイドバー「折りたたみメニュー」RSSリンクの表示。
クリック側は、onclick属性にてdisplayによる表示/非表示を制御。
展開側は、対応するidを書くだけで、スクリプトも使わず超簡単。
ソースはこんな感じ。


クリックで展開


ここに書いたものが上述の「クリックで展開」をクリックすると表示される

2箇所ある「xxxxx」の部分は任意の同じ文字列にする。
識別するだけなので「メニュー1」のように日本語でもたぶん大丈夫。
また、次のように記事中に使う事もできる。
 ▼クリックで展開▼
折りたたみだよ~ん

  • ・Fc2ブログではじめるこだわりブログ・FC2ブログスーパーカスタマイズテクニック・かんたんFC2ブログ・デザイン・FC2ブログ基本&便利技・さすが!と言わせるFC2ブログ徹底攻略術*

まぁ普通のブログであれば、予めシステムにある「read more」や「続きを読む」で事足りると思うけど、オリジナルカスタマイズにより「続きを読む」を別の用途で使っている場合にオプションとして使えるかな。
アレンジすれば、次のページの【商品をもっと見る】のような使い方もできる。
成人式の振袖 レンタル・貸衣装
ただし、複数の記事や複数のメニューなどに使う場合には注意すべき点がある。
たとえ記事ひとつに対して一つしか使ってないとしても、月別やカテゴリー別ページなどで、記事を複数件表示する設定の場合、ページによっては複数表示される事になる。
折りたたみを複数使う場合の注意点ページ内で重複すると誤動作が発生するため、xxxxxの部分を重複しないようにする。
例えば、「menu1」とか「menu2」とか、任意の文字列なんでもいいので区別する。
記事の場合は、それぞれの記事に重複しない番号が割り当てられているので、その番号を利用してentry○○とすれば問題は起きない。

http://customizefc2blog.blog.fc2.com/blog-entry-18.html

関連ノウハウ

このノウハウを評価する

評価、コメントするにはサービスに登録してください。

サービス登録をする

コメントを見る

コメントするにはサービスに登録してください。

サービス登録をする

この記事を通報する

ノウハウを書く