【応用編】アコーディオンパネル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>