jQueryでアコーディオンを横向きに開閉する。

HTMLを用意する

<div>
　<dl>
　　<dt id=”step1″><span>Step.1</span></dt>
　　<dd><p>Lorem ipsum　（中略）　venenatis.</p></dd>
　　<dt id=”step2″><span>Step.2</span></dt>
　　<dd><p>Lorem ipsum　（中略）　venenatis.</p></dd>
　　<dt id=”step3″><span>Step.3</span></dt>
　　<dd><p>Lorem ipsum　（中略）　venenatis.</p></dd>
　</dl>
</div>

 

CSSを用意する

body{
background:#252422;
}
div{
width:800px;
height:300px;
margin:50px auto;
overflow:hidden;
}
dl{
width:900px;
height:300px;
}
dt{
width:35px;
height:300px;
float:left;
}
dt span{
display:block;
width:100%;
height:100%;
text-indent:-9999px;
}
dt span.over{
cursor:pointer;
}
dt span.selected{
cursor:default;
}
dt#step1 span{
background:url(“images/background-1.jpg”);
}
dt#step1 span.over{
background:url(“images/background-1-over.jpg”);
}
dt#step1 span.selected{
background:url(“images/background-1-selected.jpg”);
}
dt#step2 span{
background:url(“images/background-2.jpg”);
}
dt#step2 span.over{
background:url(“images/background-2-over.jpg”);
}
dt#step2 span.selected{
background:url(“images/background-2-selected.jpg”);
}
dt#step3 span{
background:url(“images/background-3.jpg”);
}
dt#step3 span.over{
background:url(“images/background-3-over.jpg”);
}
dt#step3 span.selected{
background:url(“images/background-3-selected.jpg”);
}
dd{
margin:0;
width:695px;
height:300px;
float:left;
background:#D4D0C8;
overflow:hidden;
}
dd p{
width:655px;
text-indent:1em;
padding:20px;
}

 

jQueryを用意する

$(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”);
         });
});
DEMOはコチラ

「説明」

①　 $(“dd:not(:first)”).css(“width”,”0px”);

初期状表示態の設定では、１番目の以外のパネル(dd要素)のwidthを０pxに変更します。

②　$(“dt:first span”).addClass(“selected”);

１番目のdt要素に対してclass属性「selected」を追加し、展開中のラベルスタイルに

設定します。

③　if($(“+dd”,this).css(“width”)==”0px”){

if分で、クリックされたラベルに対応するパネル(dd要素）の横幅が0の場合の処理を

記述します。

④　 $(“dt:has(.selected) +dd”).animate({“width”:”0px”});

ラベルがクリックされたら、class属性が「selected」の要素を含むdt要素の次に登場する

dd要素の幅(width)を0に変更します。幅の変更には、任意のCSSプロパティの値を
アニメーション付きで変化させるanimate()を使います。これで展開中のパネルが閉じます。

⑤　 $(“+dd”,this).animate({“width”:”695px”});

同様に、クリックされた要素の次に登場するdd要素の幅(width)をanimate()で695pxに変更します。

これで、クリックされたラベルに対応するパネルが開きます。

⑥　  $(“dt span”).removeClass(“selected”);
$(“span”,this).addClass(“selected”);

クリックされたラベルを選択状態にするため、すべてのspan要素からclass属性「selected」

を取り除き、クリックされたdt要素内のspan要素にclass属性「selected」を再設定します。

⑦　}).mouseover(function(){
$(“span”,this).addClass(“over”);
}).mouseout(function(){
$(“span”,this).removeClass(“over”);
});

最後にmouseover/mouseoutイベントでロールオーバーの処理を設定したら完成です。