Horizontal Accordion

First Panel Content #1

Second Panel Content #2

Third Panel Content #3

jQuery Code:

	// 添加 h-accordion 效果
	var w;
	$.switchable.addEffect("h-accordion", function(i, done) {
		var self = this,
			items = self.getPanels(),
			lastItem = items.eq(self.getIndex()),
			thisItem = self.getVisiblePanel(i);
		
		if ( !w ) {
			w = items.first().width();
		}
		
		if ( lastItem.is(":animated") ) {
			lastItem.stop(true);
		}
		lastItem.animate({ width: 0 }, function() {
			$(this).hide();
		});
		thisItem.animate({ width: w }, function() { 
			$(this).show();
			done.call();
		});
	});
	
	$(function(){
		$(".h-accordion").switchable(".h-accordion > div", {
			triggers: "img",
			triggerType: "click",
			effect: "h-accordion",
			speed: .3
		})
		// 为第二和第三个 Panel 设置初始宽度
		.children("div:gt(0)").css("width", "0px");
	});
	

HTML Code:

	<div class="h-accordion">
		<img src="../../image/streaminge.png" />
		<div>
			<b>First Panel</b>
			<i>Content #1</i>
		</div>
	
		<img src="../../image/flash.png" />
		<div>
			<b>Second Panel</b>
			<i>Content #2</i>
		</div>
	
		<img src="../../image/streaming.png" />
		<div>
			<b>Third Panel</b>
			<i>Content #3</i>
		</div>
	</div>