THE HAM MEDIA BLOG

先日、同じ業界で働こうとしている友人に、
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");
});

■サンプルプレビュー

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

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

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

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