code.Atomic8Ball.com

jQuery Accordion Instructions

1. Confirm jQuery (1.6+) and jQuery UI (1.8+) are present, needs a theme.
2. Place the following between the <head> and </head> tags. <script>
  $(function() {
     $("#accordion").accordion();
  });
</script> Optional: For the default styling as seen in the demo you can also add <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>
3. Add your HTML to create the accordion, wrap the HTML in a <div> that has an id or class matching the selector above. <div id="accordion">
   <h3>Header 1</h3>
   <div>
      <p>Here is some contents!</p>
   </div>
   <h3>Header 2</h3>
   <div>
      <p>Other stuff!</p>
   </div>
   <h3>Header 3</h3>
   <div>
      <p>More things!</p>
   </div>
</div>

Notes:

A few of the more useful options:

• collapsible: makes it so the open accordion can be closed by clicking it again.
• active: sets a particular pane to be open by default (0 based index)
• heightStyle: "content" (in quotes) sets accordion height to be only as high as the content inside it

View more on http://docs.jquery.com/UI/Accordion