Home > 20080404


20080404

記事内のテキストクリックで隠し本文を展開する
ちょっと面白い小技紹介です。といっても、FC2公式サイトのQ&Aを見て結構使えるなぁと思い気に入ったものをパクって使っているのですが・・・。サンプルはテストブログに掲載しまして、以下の通りです。

Click Open Contentsのサンプルはこちら

このような感じで、あるテキストをクリックすると、隠れテキストが表示/非表示される仕組みのスクリプトとタグです。導入手順は以下の通りです。

１．スクリプトを <head> 〜 </head> 内に設置
tenkai.js
※ ローカル保存（EUC-JP）後、各自でアップロードの上、ご利用ください

２．css欄に以下記述を追加
tenkai.css
※ js同様、各自でアップロードの上、ご利用ください

３．記事内に以下タグを記述
<div class="style1">
<span class="style2" onclick="ex('hogehoge');">クリックできるテキスト</span>
<div class="style3" id="hogehoge">クリックしたら表示/非表示させる隠れテキスト</div>
</div>
cssの数値（margin/padding）や項目（border/background）を変更することで、表示されるテキストの囲いや位置を操作することができます。
●style1：単体・複数どちらでも最初から最後を囲みます
●style2：クリックできるテキスト
●style3：クリックしたら表示される隠れテキスト

赤文字のhogehogeは、ユニークな名称で構いませんが、1ページに複数作成する場合は名称をそれぞれ変えてください。
密かにカスタマイズして会社のサイト内FAQにも実装しちゃっています。

Home > 20080404

Search
Adsense

Calendar
« 2008/04 »
S M T W T F S
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 - - -
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top