jQueryで作る2種類のアコーディオン

Javascript

2009.11.25

jQueryを使用して、2種類のアコーディオンを作成します。
2種類といっても、動作が少し違うだけです。。。

HTMLとCSS

<dl>
<dt>1.タイトル</dt>
<dd>サンプルテキストサンプルテキストサンプルテキスト</dd>
<dt>2.タイトル</dt>
<dd>サンプルテキストサンプルテキストサンプルテキスト</dd>
<dt class="last-child">3.タイトル</dt>
<dd>サンプルテキストサンプルテキストサンプルテキスト</dd>
</dl>
dl {
width: 300px;
border: solid #000 1px;
}

dt {
padding: .5em;
height:30px;
background: #000;
border-bottom: solid #fff 1px;
color: #fff;
font-weight:bold;
}

dt.last-child {
border-bottom: none;
}

dd {
height:150px;
background: #fff;
}

1つのdd要素だけが開く:Javascriptソース

$(function(){

//CSSの設定
$("dt").css("cursor","pointer"); //dt要素のカーソルをポインターに変更
$("dd:not(:first)").css("display","none"); //最初のdd要素以外を非表示

//dt要素がクリックされたときの動作
$("dt").click(function(){
if($("+dd",this).css("display")=="none"){ //クリックされたdt要素に隣接するdd要素が非表示だった場合
$("dd").slideUp("slow"); //スライドアップで非表示
$("+dd",this).slideDown("slow"); //クリックされたdt要素に隣接するdd要素をスライドダウンで表示
}
});

});

動作

dt要素をクリックするとdd要素が閉じますが、クリックしたdt要素に隣接しているdd要素のみ開きます。
その設定が8行目からのif文で記載されています。
10行目で全てのdd要素をスライドアップで非表示にしています。
その後、11行目のクリックされたdt要素に隣接したdd要素をスライドダウンで表示しています。
10行目と11行目を逆にすると、開いてすぐに閉じてしまいます。

開きっぱなしのdd要素:Javascriptソース

$(function(){

//CSSの設定
$("dt").css("cursor","pointer"); //dt要素のカーソルをポインターに変更
$("dd").css("display","none"); //最初のdd要素以外を非表示

//dt要素がクリックされたときの動作
$("dt").click(function(){
if($("+dd",this).css("display")=="none"){ //クリックされたdt要素に隣接するdd要素が非表示だった場合
$("+dd",this).slideDown("slow"); //クリックされたdt要素に隣接するdd要素をスライドダウンで表示
} else {
$("+dd",this).slideUp("slow"); //クリックされたdt要素に隣接するdd要素が表示されていた場合、スライドアップで非表示
}
});

});

動作

dt要素をクリックすると隣接しているdd要素が開きます。
その他のdd要素は反応しません。

8行目のif文でdd要素が非表示だった場合の設定が記述されていますが、
11行目のelseでdd要素が表示されていた場合の設定を記述しています。

サンプル

こちらから、2つのサンプルを確認できます。
サンプル

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. jQueryで作る2種類のアコーディオン
オススメ本(既読)
読んでみたい本(未読)

COMMENT!!

とてもためになりました。
私が知っているアコーディオンのjQueryサイトで一番わかりやすかったです。
余計なプラグインを使っていないですし、コメントが入門に適していてとてもためになりました。
ありがとうございます。

ありがとうございます!
そう言って頂けると、ブログをしたかいがありました。
最近更新出来ていないのですが、むぎちゃさんのご意見で、やる気が出てきました!

COMMENT PLEASE!!

トラックバック

「jQueryで作る2種類のアコーディオン」のトラックバックURL
http://web-park.org/javascript/accordion091124.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook