title: Dynamically adding and refreshing elements to the Accordion widget in jQuery UI
body: <p><a href="https://stackoverflow.com/questions/3008243/jquery-ui-accordion-adding-rows-without-destroying-and-recreating">Several</a> <a href="https://stackoverflow.com/questions/5927365/jquery-accordion-with-dynamic-content">questions</a> here on SO reference this <a href="http://bugs.jqueryui.com/ticket/4672" rel="noreferrer">open jQuery UI feature request</a> for the ability to dynamically add/remove panels from the Accordion widget. The ticket itself is marked (closed feature: fixed) and  from what I can tell from the <a href="https://github.com/petersendidit/jquery-ui/blob/3dd2ef0f367c7423f9f3d2e4faf71f0a7287c716/tests/unit/accordion/accordion_methods.js" rel="noreferrer">unit tests</a> and a pull from their Git repository it appears to be implemented in the latest release.</p>
  
  <p>However if I try to add a div like they did in the unit test above:</p>
  
  <pre><code>var element = $("#accordion");
  $("#accordion").append("&lt;h3&gt;3&lt;/h3&gt;&lt;div&gt;3&lt;/div&gt;");
  $("#accordion").accordion("refresh");
  </code></pre>
  
  <p>I can't get it to work.</p>
  
  <p>However <a href="https://stackoverflow.com/questions/3008243/jquery-ui-accordion-adding-rows-without-destroying-and-recreating">this method</a> works:</p>
  
  <pre><code>$("#accordion").append("&lt;h3&gt;sec&lt;/h3&lt;div&gt;test&lt;/div&gt;").accordion("destroy").accordion();
  </code></pre>
  
  <p>But I don't want to "destroy" the accordion, I just want to append (or prepend) an element and refresh it.</p>
  
  <p>Looking at the div I added in Chrome's inspector shows that the element I added doesn't have the same CSS styling added as the rest of the accordion:</p>
  
  <p><img src="https://i.stack.imgur.com/88z0v.jpg" alt="enter image description here"></p>