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