原文和演示在这里：http://jsfiddle.net/DkHyd/
我在这里直接粘贴出代码作为备份：
首先是演示用的Html,这里我简化一点内容，使其更短一些
Html Code
<h1>Toggle Panels</h1>
<div id="notaccordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>
Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
</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
</p>
<p>
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
</p>
</div>
</div>
然后是关键，jQuery代码：
1 $.fn.togglepanels = function(){
2 return this.each(function(){
3 $(this).addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
4 .find("h3")
5 .addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
6 .hover(function() { $(this).toggleClass("ui-state-hover"); })
7 .prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
8 .click(function() {
9 $(this)
10 .toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
11 .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
12 .next().slideToggle();
13 return false;
14 })
15 .next()
16 .addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
17 .hide();
18 });
19 };
20
21 $("#notaccordion").togglepanels();