プロフィール

FC2BLOGカスタマイザー

FC2BLOGカスタマイザー

FC2ブログ十数件、アメブロ数件、Yahoo!ストア、Yahoo!オークションストア、カラーミーショップ、ビジネスサイト数件、趣味サイト数件を現在仕事とプライベートで管理・運営中。過去には他のASPやCMSもいろいろ。

全記事表示リンク
検索フォーム
ユーザータグランキング
最新コメント
<>+-

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ

超簡単な折りたたみ展開メニュー

サンプルは、このブログの右サイドバー「折りたたみメニュー」RSSリンクの表示。

クリック側は、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>
<!--// 折りたたまれ -->

2箇所ある「xxxxx」の部分は任意の同じ文字列にする。
識別するだけなので「メニュー1」のように日本語でもたぶん大丈夫。

また、次のように記事中に使う事もできる。

 ▼クリックで展開▼


まぁ普通のブログであれば、予めシステムにある「read more」や「続きを読む」で事足りると思うけど、オリジナルカスタマイズにより「続きを読む」を別の用途で使っている場合にオプションとして使えるかな。

アレンジすれば、次のページの【商品をもっと見る】のような使い方もできる。
卒業式袴 レンタル・貸衣装

ただし、複数の記事や複数のメニューなどに使う場合には注意すべき点がある。
たとえ記事ひとつに対して一つしか使ってないとしても、月別やカテゴリー別ページなどで、記事を複数件表示する設定の場合、ページによっては複数表示される事になる。

 ▼クリックで展開▼
にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ
CATEGORY:FC2BLOGカスタマイズ
TAGS:
THEME:インターネットサービス | GENRE:コンピュータ

COMMENT

No title

はじめまして。

記事をたたみたい所がいくつもあって、どうしたらよいか探していたら、まさに!希望通りのことができました。
一つの記事を長い期間更新することがあり、履歴が長くなって困っていました。

記事にソースを追加するだけなので、簡単で良いですね。

とても助かりました。
ありがとうございました。

No title

記事を折りたたむ技術を求めてここにたどり着きました。大変助かりました<(_ _)>

お借りします

折り畳みする方法がなかなか見つからなくて困っていましたがこの方法で出来ました!ありがとうございますっ

ありがとうございました~

検索でたどり着きました!
前に引っかかった方法は数年前の記事で試しても試しても
効かなくて、助かりました~!
大事に活用させていただきまーす!
ありがとうございました~!

No title

折りたたみ機能を導入できないか探していて辿り着きました!
ありがとうございます。
お借りします!

No title

折りたたみを探してたどり着きました。
とても少ないスクリプトで助かります。
すみません、最初から開いている状態ってできますか?
余力がございましたら、よろしくお願いします。

No title

>最初から開く
折りたたまれ側のdisplay:noneをdisplay:inlineにしてみてください。

No title

やりたかったことが見つかりました。
ありがとうございます。

No title

探し求めて見つけました
お借りします!
思ってた通りに出来ました!ありがとうございます!

No title

ありがとうございます!!!いただきました!

No title

簡単に折りたたみを作成できて、とても助かりました♪
ありがとうございました!

No title

すっごく簡単に折りたたみメニュー完成できました。助かりました。
質問なのですが、「折りたたまれ」側に画像を配置したのですが、その「折りたたまれ」側の画像をクリックすると閉じる。ということはできますか?

No title

はじめまして。
HTML初心者で、展開の方法を探していたのでとても助かりました。
ただ、二つ以上設置すると二つ目を開いたときに同時に上のものも展開してしまいます。
なにか解決の方法をご教授頂ければ幸いです。

EDIT COMMENT

非公開コメント

テンプレート
テンプレートに関する質問は、このブログでは受けつけておりません。複数のサイトやブログを運営しており、メインブログ以外はコメントに気がつかない事が多いからです。質問がある方は下記から、それぞれのテンプレートのリンクをクリックし、そちら(メインブログ)で質問をお願いします。
▼ ▼ ▼ ▼ ▼ ▼ ▼ ▼

sightseeingに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。スライドショー

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。奥入瀬

moon_treeに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。月と木

torn_paperに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。破れた紙風

wantedに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。WANTED張り紙風

glass_boardシリーズに関する不具合報告・質問等は→FC2ブログ共有テンプレート作ってみた。glass_boardシリーズ
アクセスランキング
[ジャンルランキング]
コンピュータ 590位
[サブジャンルランキング]
Webサイト作成 23位
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。