Accordion


First

Content #1

Content #1

Second

Content #2

Content #2

Content #2

Third

Content #3

jQuery Code:

	// 添加 accordion 效果
	$.switchable.addEffect("accordion", function(i, done) {
		var self = this,
			cfg = self.getCfg(),
			items = self.getPanels(),
			thisItem = self.getVisiblePanel(i);
	
		items.slideUp(cfg.speed * 1000);
		thisItem.slideDown(cfg.speed * 1000, done);
	});
	
	$(function(){
		$(".accordion").switchable(".accordion > .panel", {
			triggers: "h3", // 更改触点
			triggerType: "click",
			effect: "accordion", // 加载 accordion 效果
			speed: .3
		});
	});
	

HTML Code:

	<div class="accordion">
		<h3>First</h3>
		<div class="panel">
			<p>Content #1</p>
			<p>Content #1</p>
		</div>
		
		<h3>Second</h3>
		<div class="panel">
			<p>Content #2</p>
			<p>Content #2</p>
			<p>Content #2</p>
		</div>
		
		<h3>Third</h3>
		<div class="panel">
			<p>Content #3</p>
		</div>
	</div>