jQueryで横にスライドする縦型アコーディオンのコンテンツを作る方法・手順

以前作成した時のメモ書きのレベルですが、下記コードで動きます。

jQuery部も含めあまり難しくはないと思うので各所読み解いて、必要なところはグリグリ変更してください。

こんなのが出来ます(下記は画像なので動かないです)

横アコーディオン-jQuery

html部

<div>
	<dl>
		<dt id="step1"><span>1</span></dt>
		<dd><p>ステップ1とは<br />テキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
		<dt id="step2"><span>2</span></dt>
		<dd><p>ステップ2とは<br />テキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
		<dt id="step3"><span>3</span></dt>
		<dd><p>ステップ3とは<br />テキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
		<dt id="step4"><span>4</span></dt>
		<dd><p>ステップ4とは<br />テキストテキストテキストテキストテキストテキストテキストテキスト</p></dd>
	</dl>
</div>

css部

div{
	width:800px;
	height:300px;
	overflow:hidden;
}
dl{
	width:900px;/*floatなので稼働時に場合によってはカラム落ちするので余分に横幅を取り上記のdivで余分な部分を隠す*/
	height:300px;
}
dt{
	width:35px;
	height:300px;
	float:left;
}
dt span{
	display:block;
	width:100%;
	height:100%;
}
dt span.over{
	cursor:pointer;
}
dt span.selected{
	cursor:default;
}
dt span{
	background:#727272;
}
dt span.over{
	background:#FFB439;
}
dt span.selected{
	background:#0AA238;
}
dd{
	margin:0;
	width:660px;
	height:300px;
	float:left;
	background:#C1BCBC;
	overflow:hidden;
}
dd p{
	width:655px;/*稼働時に中のテキストが動かないように*/
	text-indent:1em;
	padding:20px;
	margin:0;
}

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":"660px"});
				$("dt span.selected").removeClass("selected");
				$("span",this).addClass("selected");
			}
		})
		.mouseover(function(){
			$("span",this).addClass("over");
		})
		.mouseout(function(){
			$("span",this).removeClass("over");
		});
});

以上で動きます。

  • このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサーリンク