THE HAM MEDIA BLOG

jQueryを使ってアコーディオンの様な開閉できるスクリプトを作ってみた

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
開閉
Javacript
jquery

jQueryを使った開閉スクリプト

先日、同じ業界で働こうとしている友人に、
Q&A部分をクリックで開閉できるようにしたい。
と言われたので、作ろうとしたけどなんだかうまくいかなかった。

classとかidとかで名前を付けなくても、
動作するような開閉プログラムができないかなってことで数日悩んでみた。

悩んだ結果、うまく動作するのができたので紹介しておく。



これができるまで

クリックしたら、そのクリックした部分に関連するところを開く様にしたい。

最初はclassとか振り分けて作っていたけど、
それだと開閉部分を増やしたときにもclassとかidを指定しないといけないので面倒。

じゃあクリックする部分と開く部分を配列で格納して、
該当する部分を同時に出力するようにしてみようかと思ったけど、
それもうまいこと行かず失敗。何よりプログラムが面倒になる。

そんなことをしなくてもクリックした部分のindexをとって、
クリックした箇所と同じ位置にある部分を開くようにすればできるかな?
なんて思ったのでやってみたらうまくいった。

やっぱり考えてみるもんだね。

jQueryを使った開閉ブログラム

■サンプルソース

$(function(){
	$("dd").hide();
	$("dt").click(function(){
		var index = $("dt").index(this);
		$("dd").eq(index).slideToggle("fast");
	}).css("cursor","pointer");
});

■サンプルプレビュー

Q1.
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
Q2.
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
Q3.
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
Q4.
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト
Q5.
ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

プレビューの部分で、クリックしてみてもらいたい。
クリックしたところが開閉できるようになっている。

開閉プログラムの使いどころ

長くなるようなコンテンツで使ったり、
Q&Aの部分で使ってみたり、ブログのサイドバーとかで使えるかなって思う。

今回はdd部分を最初に隠す(hige)ようにしたけど、
ここを用途に応じて最初に閉じていたい部分だけ指定すれば、
最初は閉じている部分と最初から開いている部分を分けることができる。
classとかで指定したら楽だと思う。



この記事へのコメント
自分なら横着して、dtの次に必ずddが来るからってことで

$("dt").click(function(){
 $(this).next().show()
});

とか書く所でした(汗
indexを取得する方が確実ですね。勉強になりました。
Posted by com2 at 2008年07月24日
>com2さん
なるほど、next()を使うという手もあったのですね。
むしろそれを思い浮かばなかっただけです(汗)
僕も勉強になりました!
Posted by ハム at 2008年08月01日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。