jqueryで簡易アコーディオンを作成してみました。やり方は多々あると思うけども個人的によくActionScriptで使用するロジックで試してみました。
あくまで簡易的なのはご勘弁
jQuery
目次
クリックするタイトル（h3）と表示・非表示するボックス(.box)をラップでくるむ
でアコーディオンのタイトルとボックスを包むことでタイトルをjQeuryで取得するときに他のタイトルのh3要素を反応しないようにする
もし包まないでタイトルのh3要素をjQueryで取得すると全部のボックス（.box）要素が表示されてしまう。もちろん対処方法はいくらでもあるんですが、楽な方向でww
前回クリックした要素を変数に保存する
よくActionScriptで使用する方法。保存する変数（var $pre）を宣言しておいてクリック時のアニメーション時に対象の要素を保存。変数宣言時はnullに設定
＊補足としてslideDownの直前にstop()メソッドを実行することで連続クリックによるアニメーションのキューの保存を消去して連続で同じアニメーションが実行されないようにする
var $pre=null;
$("div.wrap > h3").click(function(){
//クリックしてslideDownで表示しつつ変数に要素を保存する
$pre=$('+div.box',this).stop().slideDown('fast');
});
条件分岐による前回保存した要素をアニメーションで非表示にする
変数（$pre）に保存しておいた要素を別のタイトル要素（h3）がクリックされたときに条件分岐でnull以外であるがをチェックしてエラーを回避（初期値がnull）
その後、別のタイトルをクリックしたときに、条件分岐を通過（true時）して保存しておいた要素（$pre）を非表示にするアニメーションを実行する。その後に再度クリックされた要素を保存するようにすれば別の要素がクリックされたときに前回の要素は非表示になる
var $pre=null;
$("div.wrap > h3").click(function(){
//null以外かをチェックしてnullでなければ前回の要素を非表示にする
if($pre!=null){
$pre.stop().slideUp("fast");
}
$pre=$('+div.box',this).stop().slideDown('fast');
});
上記の方法はjavascript だけでなくActionScriptでも個人的によく使用する便利なロジック・・・だと思ってます。
使用したhtml
タイトル１
ここにテキストが入ります
ここにテキストが入ります
タイトル2
ここにテキストが入ります
ここにテキストが入ります
タイトル3
ここにテキストが入ります
ここにテキストが入ります
使用したCSS
