与jQuery UI的Accordion控件高度相似但可以同时展开多个区域的代码

原文和演示在这里：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();