制作Tipstutorials & tips
開閉パネル
jQueryを使った開閉パネルをひとつ。ここで行うのは、あるブロックをクリックすると、その下にするするっと隠れていたテキストなどが表示されるというもの。よくFAQページなどで使われるアレです。
必要なのは、jQueryライブラリ本体と以下のスクリプトのみ。
ライブラリ本体はhttp://code.jquery.com/jquery-1.6.1.min.jsからダウンロードできます。ダウンロードしたライブラリと下記スクリプトを読み込み、htmlには適切にddやdtをマークアップしてあげましょう。
<script type="text/javascript" src="jquery-1.6.1.js"></script>←ライブラリ本体を読み込み・・・
<script type="text/javascript">←開閉パネル用のスクリプトを追加し・・・
$(document).ready(function(){
$("dd").hide();
$("dt").click(function(){
$(this).toggleClass("active").next().slideToggle("slow"); //←ここは他に「fast」や「middle」も使えます
});
});
</script>
<dl>←マークアップは以下のとおりにしてあげればOK。dtをクリックするとddが開閉表示されます
<dt>タイトル</dt>
<dd>表示されるテキストや画像など</dd>
</dl>
- May 25, 2011 05:59 PM
- MovableType
- MTタグ サイト構築全般 プラグイン
- illustrator
- jQuery
カテゴリ
- 2011年
- 2011年5月 [6]
月別アーカイブ
- illustratorからPDF制作する際のエリア... May 27, 2011
- 日本語版MTをつかって構築したサイトを、外国人スタ... May 27, 2011
- サイドメバーでカテゴリ別メニューをツリー化する... May 26, 2011
- サイドバーで年別カテゴリーリストをツリー化する... May 25, 2011
- 開閉パネル...
最新エントリー
May 27, 2011