jQueryのアコーディオンメニュー

サンプルからカスタマイズして、一度開いたメニューを閉じることができるようにカスタマイズしてみました。

もとのスクリプトはこちら。
http://ascii.jp/elem/000/000/466/466410/

タイトル1(クリックすると展開されます)
テキストテキスト
タイトル2(クリックすると展開されます)
テキストテキスト


加えたのは下記の部分。
dtのひとつしたのdd要素がdisplayになっていたら、ddをスライドアップして、dtの色をselectedのクラスをトリ。
「+」がひとつしたの、という指定の仕方。

$(“dl dt”).click(function(){
//click動作の下に下記を追加
 if ($(“+dd”,this).css(“display”)==”block”){
  $(“+dd”,this).slideUp(“slow”);
  $(this).removeClass(“selected”);
}

最初のひとつも閉じているようにするには、2行目を書き換えます。

$(“dd:not(:first)”).css(“display”,”none”);

$(“dd”).css(“display”,”none”)

完成したソース
わかりやすいように途中にコメントを入れてます。

$(function(){
// 初期動作 全部閉じ
$(“dd”).css(“display”,”none”)

// クリック
$(“dl dt”).click(function(){

 // 開いているのを閉じる
 if ($(“+dd”,this).css(“display”)==”block”){
  $(“+dd”,this).slideUp(“slow”);
  $(this).removeClass(“selected”);
 }

 // 開いているのを閉じて、クリックしたのを開く
 if($(“+dd”,this).css(“display”)==”none”){
  $(“dd”).slideUp(“slow”);
   $(“+dd”,this).slideDown(“slow”);
   $(“dt”).removeClass(“selected”);
   $(this).addClass(“selected”);
  }
  }).mouseover(function(){
   $(this).addClass(“over”);
  }).mouseout(function(){
   $(this).removeClass(“over”);
  })
})