สร้าง Horizontal Accordion แนวนอน ด้วย jQuery อย่างง่าย

ตัวอย่าง

CSS ตัวอย่าง

<style type="text/css">
div#containSlidebanner{
	margin:0;
	padding:0;
	width:500px;
	height:250px;
	overflow:hidden;
	background-color:#FFFF33;
}
ul#slideBanner,ul#slideBanner li{
	margin:0;
	padding:0;
	list-style:none;
	float:left;
}
ul#slideBanner{
	width:550px;
	white-space:nowrap;
}
ul#slideBanner li{
	width:100px;
	height:250px;
}
li#banner1{
	background-color:#CC99CC;
}
li#banner2{
	background-color:#99CC66;
}
li#banner3{
	background-color:#33CC99;
}
li#banner4{
	background-color:#FFFF66;
}
li#banner5{
	background-color:#CCFF00;
}
</style>

HTML Code ตัวอย่าง

<div id="containSlidebanner">
<ul id="slideBanner">
<li id="banner1"></li>
<li id="banner2"></li>
<li id="banner3"></li>
<li id="banner4"></li>
<li id="banner5"></li>
</ul>
</div>

jQuery Code ตัวอย่าง

<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("ul#slideBanner li").hover(function(index){
		$(this).animate({
			width:"300px"
		},200);
		$(this).prevAll("li").animate({
			width:"50px"
		},200);
		$(this).nextAll("li").animate({
			width:"50px"
		},200);
	},function(){
		$(this).stop(true);
		$(this).siblings("li").stop(true);
	});
	$("div#containSlidebanner").hover(function(){
	},function(){
		$("ul#slideBanner li").animate({
			width:"100px"
		},200);
	});
});
</script>