参考サイト：http://docs.jquery.com/UI/Accordion
【HTML】
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion({ autoHeight: false });
$("#accordion").accordion({ collapsible: true });
$("#accordion").accordion({ active: false });
});
</script>
【説明】
アコーディオンにしたい親要素に「#accordion」を付ける
例）
dlに「#accordion」を付けると
dtがボタン
ddが開閉
#1 「autoHeight:■」
アコーディオンごとの高さを合わせるかどうか（固定か調整か）
「autoHeight:false」＝高さを合わせない（自動調整）
#2 「collapsible:■」
全てを折りたたむことも出来るようにするかどうかの設定
「collapsible:true」＝全てを折りたためるように出来るようにする
#3 「active:■」
ページを読み込んだ時に開いている状態にするアコーディオンを選択出来る
「active:1」＝2つめを開く（0が一つ目、1が二つ目、2が三つ目、…）
「active:false」＝#2で「collapsible:true」を設定している上で、これを設定すれば、ページを読み込んだ時に全てが閉じた状態に出来る。
【マウスオーバー時などのCSS設定】
アウト時
.ui-state-focus,
.ui-state-default{
}
オーバー時
.ui-state-hover,
.ui-state-active{
}