Web上にはjQueryベースでのアコーディオン動作の実装サンプルスクリプトがたくさんありますが、
シンプルなスクリプトで理想的な動作がなかなか見あたらなかったので、自作で作ってみたサンプルの紹介。
アコーディオン動作は使用する場面によって、いくつかパターンがあります。
複数展開させる項目がある場合でのアコーディオン動作は、
基本的にはボタン（項目？）部分をクリックすることで詳細を展開、
そこから他のボタンをクリックした際に、
・現状展開している項目を閉じて、次を開くパターン
・現状展開している項目を閉じずに、次の項目もそのままどんどん詳細部分を展開し続けていくパターン
と分かれると思いますが、その両パターンのスクリプトのサンプルを紹介。
HTMLソースは
＜dl＞ ＜dt＞ボタン部分＜/dt＞ ＜dd＞ボタンクリックで展開する内容＜/dd＞ ＜/dl＞
としています。
まずは「現状展開している項目を閉じて、次を開くパターン」
展開する項目は最大１つ。
◆動作サンプル（iframeでの読み込みの為、展開した際の余白を多めにとってあります。）
実装の際のスクリプトは以下の通り。
$(function(){
$('dl.acdn dd').css('display', 'none');
$('dl.acdn dt').click(function(){
if ($(this).hasClass('active')){
$(this).removeClass('active');
$('+dd:not(:animated)',this).slideUp('normal');
} else {
var d = {height:'toggle', opacity:'toggle'};
$('dl.acdn dt').removeClass('active');
$('dl.acdn dd:not(:animated)').slideUp('normal');
$(this).toggleClass('active');
$('+dd',this).animate(d);
}
}).mouseover(function(){
$(this).addClass('ov');
}).mouseout(function(){
$(this).removeClass('ov');
});
});
<dt>のクリック毎に子要素の<dd>を展開する構成。
ボタン部分には現在展開中の物にはクラス「.active」を付加し、
マウスオーバーでは「.ov」のクラスを付加しています。
サンプルでは<dl>にクラス「.acdn」を付けていますが、
作成する際のページ内で<dl>を他で使用していない場合は、
「.acdn」を全て削除しても可。
CSSの記述例は以下の通り。
dl.acdn {
width: 450px;
border-top: #000 1px solid;
border-left: #000 1px solid;
border-right: #000 1px solid;
position: relative;
}
dl.acdn dt {
padding: 5px 10px;
color: #fff;
font-weight: bold;
cursor: pointer;
background: #222;
border-left: #222 4px solid;
border-bottom: #000 1px solid;
position: relative;
}
dl.acdn dt.active,
dl.acdn dt.ov {
background: #000;
border-left: #EB0F0F 4px solid;
}
dl.acdn dt.active {
color: #EB0F0F;
}
dl.acdn dd {
border-bottom: #000 1px solid;
position: relative;
}
dl.acdn dd p {
padding: 10px 10px;
background: #efefef;
}
続いては「現状展開している項目を閉じずに、次の項目もそのままどんどん詳細部分を展開し続けていくパターン」
展開する項目は全て。
◆動作サンプル（iframeでの読み込みの為、展開した際の余白を多めにとってあります。）
実装の際のスクリプトは以下の通り。
$(function(){
$('dl.acdn dd').css('display', 'none');
$('dl.acdn dt').click(function(){
var d = {height:'toggle', opacity:'toggle'};
$(this).toggleClass('active');
$('+dd:not(:animated)',this).animate(d);
}).mouseover(function(){
$(this).addClass('ov');
}).mouseout(function(){
$(this).removeClass('ov');
});
});
一つ目のスクリプトから不要箇所を削除しただけですが。。。
展開パターン以外の構成は全て同じです。（もちろんHTML、CSSも一つ目のサンプルと同じ。）
基本的に二つともに<dl>をソース上に記述したら、
スクリプトを読み込ますだけでアコーディオンが実装可能となっています。
<dd>の消去処理もスクリプト側で行っていますが、
処理が遅いマシンなどではページロード時に<dd>要素が一瞬表示されてしまう場合があるかもしれませんが、
その場合にはCSSで<dd>に対してdisplay:none;を記述しておけばページロード時にも表示されることはありません。
アコーディオン動作は基本的にこの２つあれば何とかなる気がしていますが、
応用（？）として、アコーディオン展開パターンが縦ではなく横タイプの場合。
◆動作サンプル
HTMLソースは<dt>に<span>が追加され、
＜dl＞ ＜dt＞＜span＞ボタン部分＜/span＞＜/dt＞ ＜dd＞ボタンクリックで展開する内容＜/dd＞ ＜/dl＞
となります。
スクリプトは以下の通り。
$(function(){
$('dl.acdn dd:not(:first)').css("width", "0px");
$('dl.acdn dt:first span').addClass("active");
$('dl.acdn dt').click(function(){
if($("+dd",this).css("width")=="0px"){
$("dl.acdn dt:has(.active) +dd").animate({"width":"0px"})
$("+dd",this).animate({"width":"330px"});
$("dl.acdn dt span").removeClass("active");
$('span', this).addClass("active");
}
}).mouseover(function(){
$('span', this).addClass("ov");
}).mouseout(function(){
$('span', this).removeClass("ov");
});
});
CSSは以下の様に書きます。
dl.acdn {
width: 450px;
position: relative;
border-top: #000 1px solid;
border-right: #000 1px solid;
border-bottom: #000 1px solid;
overflow: hidden;
}
dl.acdn {
margin-bottom: 30px;
width: 450px;
height: 200px;
background: #efefef;
}
dl.acdn dt span {
padding-top: 10px;
width: 39px;
height: 186px;
/* height: 200px; BASE*/
color: #fff;
font-weight: bold;
text-align: center;
background: #222;
border-top: #222 4px solid;
border-right: #000 1px solid;
cursor: pointer;
float: left;
}
dl.acdn dt span.active,
dl.acdn dt span.ov {
background: #000;
border-top: #EB0F0F 4px solid;
}
dl.acdn dt span.active {
color: #EB0F0F;
}
dl.acdn dd {
width: 330px;
height: 200px;
background: #efefef;
overflow: hidden;
float: left;
}
dl.acdn dd p {
padding: 10px 10px!important;
}
dl.acdn { /zoom : 1; }
dl.acdn:after { content: '';display: block;clear: both; }
こんな感じでいけるようです。
≫横展開タイプ参考：ASCII.jp：jQueryでアコーディオンパネルUIを自作する｜Web制作の現場で使えるjQuery UIデザイン入門
サイト内でアコーディオンインターフェースが必要になった際に是非。。。