Here is the demo for the JQuery UI's accordion widget. I have one on my page, and the way to put items in it (as shown on the demo page) is like so:

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed modo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>

Notice how for every item, there is the following structure: <h3>Title</h3><div><p>Text</p></div>. I would like to be able to dynamically add to this accordion; however, when I tried to simply add that structure to the accordion it didn't work. I looked into my chrome console, and saw that JQuery adds all sorts of classes and properties to the bare-looking elements of the item. Now, of course the obvious way to solve this is instead of adding <h3>Title</h3> to add

<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-lessonlist-header-0" aria-controls="ui-accordion-lessonlist-panel-0" aria-selected="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Title</h3>

And likewise for every other element. I know that this should work fine, but it looks ugly and I was wondering if JQuery has provided us with some nice function to do all this stuff for us. If it hasn't, can anyone suggest a less annoying way to do this?

EDIT: in response to all the answers suggesting to recreate the accordion: I know that that is probably a better idea than the method shown above, but is it possible to "accordion" only the block of HTML that I need as opposed to the whole accordion, which can get quite big?

Here is the demo for the JQuery UI's accordion widget. I have one on my page, and the way to put items in it (as shown on the demo page) is like so:

<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed modo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>

Notice how for every item, there is the following structure: <h3>Title</h3><div><p>Text</p></div>. I would like to be able to dynamically add to this accordion; however, when I tried to simply add that structure to the accordion it didn't work. I looked into my chrome console, and saw that JQuery adds all sorts of classes and properties to the bare-looking elements of the item. Now, of course the obvious way to solve this is instead of adding <h3>Title</h3> to add

<h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-lessonlist-header-0" aria-controls="ui-accordion-lessonlist-panel-0" aria-selected="true" tabindex="0"><span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>Title</h3>

And likewise for every other element. I know that this should work fine, but it looks ugly and I was wondering if JQuery has provided us with some nice function to do all this stuff for us. If it hasn't, can anyone suggest a less annoying way to do this?

EDIT: in response to all the answers suggesting to recreate the accordion: I know that that is probably a better idea than the method shown above, but is it possible to "accordion" only the block of HTML that I need as opposed to the whole accordion, which can get quite big?

• javascript
• jquery
• html
• jquery-ui

• I suggess you to just create it from scratch if you want the cleaner code as possible. An accordion isn't very plicated to do and you will have full control on it – Mike Boutin Commented Jan 27, 2013 at 0:20
• Well, there must be some code buried deep in the source code of the JQuery UI that does that to the accordion when the page loads. I just need help finding and stealing it. – Bluefire Commented Jan 27, 2013 at 0:21
• Maybe this ? github./jquery/jquery-tmpl – Nikola Ninkovic Commented Jan 27, 2013 at 0:22
• It will not work that way. You will have to recreate the accordion and reattach any events after appending.stackoverflow./questions/3008243/… – Dennis Rongo Commented Jan 27, 2013 at 0:25

2 Answers 2

Just recreate the accordion when you add new data to it:

$("#accordion").append(html).accordion('destroy').accordion();

The only critical HTML is the main structure:

<div id="accordion">
  <h3>Section 1</h3>
  <div></div>
 <h3>Section 2</h3>
  <div></div>
</div>

You can put anything you want inside the DIV content panels.

WHen you add a a new set of h3 and div, destroy and recreate the accordion:

var newPanel='<h3>New section</h3><div>New content</div>';
$('#accordion').append(newPanel).accordion('destroy').accordion( /* options */ );