仕事でも使うこともあったので、最近jQuery練習してます。

色々勉強中なので比較的使う機会もありそうな
横アコーディオンを色々調べつつ作成。
一番はまったのはddがwidth:0からanimateで開くときにWebKit系のブラウザで
下にはみ出てしまうのでddの子要素（ここではp）にwidthを設定しておかないといけないこと。
なるほど。

＜JS＞

$(function(){
	//初期化 ============================//
	var visibleAreaW = "900px";
	var visibleAreaH = "300px";
	var dtWidth = "50px";
	var ddWidth = "750px";
	//表示エリアwidth指定
	$("#accordionWrap").css({"width": visibleAreaW , "height": visibleAreaH});
	//各パネル幅指定
	$("#accordionWrap dl").css({"width": visibleAreaW,"height": visibleAreaH});
	//各パネル dt(見出し)幅指定
	$("#accordionWrap dl dt").css({"width": dtWidth , "height": visibleAreaH});
	//各パネル dt span幅指定
	$("#accordionWrap dl dt span").css({"width": dtWidth, "height": visibleAreaH});
	//各パネル dd(内容)幅指定
	$("#accordionWrap dd").css({"width":  ddWidth , "height":  visibleAreaH});
	//パネル ddに子要素(p)追加
	$("#accordionWrap dl dd").wrapInner("<p></p>")
	//子要素アニメーション対策のため幅指定
	$("#accordionWrap dd p").css({"width": ddWidth, "height":  visibleAreaH});
	//=================================//

	//初めのdd要素以外をwidth:0に設定
	$("#accordionWrap dd:not(:first)").css({"width":"0px"})
	//初めのdd要素のspanにselectedクラスを追加
	$("#accordionWrap dt:first span").addClass("selected");

	//dtクリック時
	$("#accordionWrap dl dt").click(function() {
		//クリックされたdtのdd要素の横幅が0の場合処理
		if($("+dd",this).css("width")=="0px") {
			//selectedクラスを含むdt(現在展開中)のddの横幅をwidth:0に設定
			$("dt:has(.selected) +dd").animate({"width":"0px"});
			//クリックされたdtのdd要素の横幅を広げる
			$("+dd",this).animate({"width": ddWidth});
			//一旦全てのspan要素からselectedクラスを取り除く
			$("dt span").removeClass("selected");
			//dd要素内のspan要素にselectedクラスを追加
			$("span", this).addClass("selected");
		}
	}).mouseover(function() {
        $("span",this).addClass("over");
    }).mouseout(function() {
        $("span",this).removeClass("over");
    })
})

＜HTML＞

<div id="accordionWrap">

			<dl>
				<dt id="palel01"><span>1</span></dt>
				<dd><img src="images/img01.gif" alt="" /></dd>
				<dt id="palel02"><span>2</span></dt>
				<dd>テキストも可能かチェック。<br />
				>テキストも可能かチェック。>テキストも可能かチェック。>テキストも可能かチェック。>テキストも可能かチェック。>テキストも可能かチェック。>テキストも可能かチェック。>テキストも可能かチェック。>テキストも可能かチェック。>テキストも可能かチェック。>テキストも可能かチェック。>テキストも可能かチェック。</dd>
				<dt id="palel03"><span>3</span></dt>

				<dd><a href="http://mooco.in/wp/wp-content/uploads/2010/01/w_tiger_1680_1050.jpg" target="_blank"><img src="http://mooco.in/wp/wp-content/uploads/2010/01/w_tiger_1680_1050-500x312.jpg" alt="w_tiger_1680_1050" title="w_tiger_1680_1050" class="alignnone size-medium wp-image-455" height="300" width="488" style="float:left; margin-right:5px;" /></a>リンクもOK</dd>
			</dl>
</div>

＜CSS＞

#accordionWrap {
	margin:50px auto;
	overflow:hidden;
	/*border:1px solid #bbbbbb;*/
}

#accordionWrap dl {
	background:#CCC;
}

#accordionWrap dt {
	float:left;
}

#accordionWrap dt span {
	display:block;
	text-indent:-9999px;
}

/*palel set */
dt#palel01 span { background:url("../images/flip01.gif") no-repeat 0 0; }
dt#palel01 span.selected { background:url("../images/flip01_on.gif") no-repeat 0 0; }
dt#palel02 span { background:url("../images/flip02.gif") no-repeat 0 0; }
dt#palel02 span.selected { background:url("../images/flip02_on.gif") no-repeat 0 0; }
dt#palel03 span { background:url("../images/flip03.gif") no-repeat 0 0; }
dt#palel03 span.selected { background:url("../images/flip03_on.gif") no-repeat 0 0; }
dt#palel01 span.over,
dt#palel02 span.over,
dt#palel03 span.over {
	filter:alpha(opacity=80);
	-ms-filter:"alpha(opacity=80)";
	-moz-opacity:0.8;
	-khtml-opacity:0.8;
	opacity:0.8;
}

#accordionWrap dt span.over {
	cursor:pointer;
}

#accordionWrap dt span.selected {
	cursor:default;
}

#accordionWrap dd {
	margin:0;
	float:left;
	overflow:hidden;
}

#accordionWrap dd p {
	display:block;
}

ちょっとだけ慣れました。

参考サイト：http://ascii.jp/elem/000/000/466/466410/