工作達人(Job Da Ren)
服務是我架站的宗旨

這個Accordion單字還滿難的，Google的字典會給你翻成手風琴，咶米？不是在講jQuery UI的特效嗎？這個翻譯真奇怪，

在維基裡你可以看到手風琴的長相，在英文的維基中還有一個關於GUI的Accordion的解釋，這個就比較像是ㄚ琪今天要測試使用的效果了，不過雖然字典沒有解釋，還是可以Google到有人翻成可折疊的特效，看一下手風琴的圖示，你可能可以意會到吧，ㄚ琪也真佩服做這個特效的人，把它命名成Accordion。

先來測試一下預設的功能，範例頁網址在http://jqueryui.com/demos/accordion/default.html

你可以將滑鼠移到標題的上方，看有什麼效果，之後再點擊看看！

它的程式碼如下：

<script type="text/javascript">
	$(function() {
		$("#accordion").accordion();
	});
	</script>

<div class="demo">

<div id="accordion">
	<h3><a href="#">Section 1</a></h3>
	<div>
		<p>
		Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
		ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
		amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
		odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
		</p>
	</div>
	<h3><a href="#">Section 2</a></h3>
	<div>
		<p>
		Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
		purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
		velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
		suscipit faucibus urna.
		</p>
	</div>
	<h3><a href="#">Section 3</a></h3>
	<div>
		<p>
		Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
		Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
		ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
		lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
		</p>
		<ul>
			<li>List item one</li>
			<li>List item two</li>
			<li>List item three</li>
		</ul>
	</div>
	<h3><a href="#">Section 4</a></h3>
	<div>
		<p>
		Cras dictum. Pellentesque habitant morbi tristique senectus et netus
		et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
		faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
		mauris vel est.
		</p>
		<p>
		Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
		Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
		inceptos himenaeos.
		</p>
	</div>
</div>

</div><!-- End demo -->

<div style="display: none;" class="demo-description">
<p>
Click headers to expand/collapse content that is broken into logical sections, much like tabs.
Optionally, toggle sections open/closed on mouseover.
</p>
<p>
The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is
usable without JavaScript.
</p>
</div><!-- End demo-description -->

概覽：

要作到這樣的效果，語義的要求如下：

你的Accordion容器的標記需要成對的標題跟內容面板：

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

假如你要使用不同的元素來做標題，你要使用適合的選擇器來指定標題的選項，例如：header: ‘a.header’，內容的元素一定在標題的後面。

假如你要在標題內有連結，並且使用a的元素作為標題，要新增一個class到裡面並使用它作為標題，例如：header: ‘a.header’。

注意：假如你要一次開啟多個標題，請不要使用Accordion。

accordion不允許同時開啟很多面板，因為它需要更多努力才能做，假如你要找容器可以開啟多個面板，不要使用這個效果，通常這個效果只要幾行的jQuery程式碼就可以使用：

jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle();
		return false;
	}).next().hide();
});

或是動畫版

jQuery(document).ready(function(){
	$('.accordion .head').click(function() {
		$(this).next().toggle('slow');
		return false;
	}).next().hide();
});

選項：