Dynamically adding and refreshing elements to the Accordion widget in jQuery UI

Question

Several questions here on SO reference this open jQuery UI feature request for the ability to dynamically add/remove panels from the Accordion widget. The ticket itself is m

Answer 1

unibasil is correct that jQuery UI 1.10.0 has updated the refresh method to now allow this behavior.

Here's the 1.10.0 changelog note about the update.

The refresh method will now recognize panels that have been added or removed. This brings accordion in line with tabs and other widgets that parse the markup to find changes.

Setup

<div class="questions">
    <div>
        <h3><a href="#">Question 1. My First Question ?</a></h3>
        <div>
            First content<br />
        </div>
    </div>
</div>
<div>
    <button id="addAccordion">Add Accordion</button>
</div>

Javascript

$('#addAccordion').click( function() {
    var newDiv = "<div><h3>Q2 New Question</h3><div>New Content</div></div>";
    $('.questions').append(newDiv)
    $('.questions').accordion("refresh");        
});

Example

jsFiddle showing that you can add new accordions on the fly without having to destroy the old one.

Answer 2

Thanks to Jarek! In my case is it functional without enclosing div. The div causes creating next accordion.

$('#addAccordion').click( function() {
  var newDiv = "<h3>Q2 New Question</h3><div>New Content</div>";
  $('.questions').append(newDiv)
  $('.questions').accordion("refresh");
});    

Answer 3

Actually discussed behaviour was included in jQuery UI 1.10.0 (just released) and works fine for me.