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

アコーディオンパネルNo1では、
縦に開閉するアコーディオンでしたが、
応用して横に開閉するアコーディオンに改良してみましょう。
横スライドするコンテンツは珍しく、
ユーザーへ印象を与えるコンテンツになります。

【jQuery】
<script type=”text/javascript”>
$(function(){
 $(“dd:not(:first)”).css(“width”,”0px”);
 $(“dt:first span”).addClass(“selected”);
 $(“dl dt”).click(function(){
  if($(“+dd”,this).css(“width”)==”0px”){
   $(“dt:has(.selected) +dd”).animate({“width”:”0px”});
   $(“+dd”,this).animate({“width”:”695px”});
   $(“dt span”).removeClass(“selected”);
   $(“span”,this).addClass(“selected”);
  }
 }).mouseover(function(){
 $(“span”,this).addClass(“over”);
 }).mouseout(function(){
  $(“span”,this).removeClass(“over”);
 });
});
</script>

【HTML】
<div>
<dl>
<dt id=”no1″><span>織田 信長</span></dt>
<dd><p>尾張国古渡城主・織田信秀の嫡男・・・</p></dd>

<dt id=”no2″><span>柴田 勝家</span></dt>
<dd><p>大永2年(1522年)、『張州府誌』によると・・・</p></dd>

<dt id=”no3″><span>前田 利家</span></dt>
<dd><p>尾張国海東郡荒子村の・・・</p></dd>

</dl>
</div>

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

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

Comments are closed.