【応用編】アコーディオンパネルNo1

タブパネルとは違った形でコンテンツを集約する方法として
アコーディオンパネルがあります。
まずはオーソドックスに縦に開閉するアコーディオンパネルです。

【jQuery】
<script type=”text/javascript”>
$(function(){
 //織田信長のパネルのみ表示させる
 $(“dd:not(:first)”).css(“display”,”none”);
 //織田信長タブを選択済みにする
 $(“dt:first”).addClass(“selected”);
 $(“dl dt”).click(function(){
  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”);
 });
});
</script>

【HTML】
<dl>
<dt>織田 信長</dt>
<dd><p>尾張国古渡城主・織田信秀の嫡男・・・</p></dd>

<dt>柴田 勝家</dt>
<dd><p>大永2年(1522年)、『張州府誌』・・・</p></dd>

<dt>前田 利家</dt>
<dd><p>尾張国海東郡荒子村の・・・</p></dd>

<dt>明智 光秀</dt>
<dd><p>清和源氏の・・・</p></dd>
</dl>

アコーディオンパネルサンプル

This entry was written by admin , posted on 月曜日 6月 20 2011at 06:06 pm , filed under 応用例 and tagged , , . Bookmark the permalink . Post a comment below or leave a trackback: Trackback URL.

Comments are closed.