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() {
    Optional: For the default styling as seen in the demo you can also add <link href="" 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>
          <p>Here is some contents!</p>
       <h3>Header 2</h3>
          <p>Other stuff!</p>
       <h3>Header 3</h3>
          <p>More things!</p>


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

Cal. Civ. Code ยง 1798.102 - Do Not Sell My Personal Information