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 marked (closed feature: fixed) and from what I can tell from the unit tests and a pull from their Git repository it appears to be implemented in the latest release.

However if I try to add a div like they did in the unit test above:

var element = $("#accordion");
$("#accordion").append("<h3>3</h3><div>3</div>");
$("#accordion").accordion("refresh");

I can't get it to work.

However this method works:

$("#accordion").append("<h3>sec</h3<div>test</div>").accordion("destroy").accordion();

But I don't want to "destroy" the accordion, I just want to append (or prepend) an element and refresh it.

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:

enter image description here

after you add it.. like in the example in the link - you have to destroy and reinitialize the accordian for it to work... since the newly added elements were not there at the time of accordion initialization. — wirey00, Dec 13 '12 at 21:30
Thanks, Jack, you asked exactly the same question I have in mind when trying to resolve the same problem. ;) And I agree with you -- destroying and re-creating accordion doesn't look good. — unibasil, Jan 18 '13 at 00:37

score 33 · Answer 1 · answered Jan 23 '13 at 18:59

33

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.

answered Jan 23 '13 at 18:59

Jerry

1,705
2
22
40

This helped me to good extent in implementing sortable/drag-gable for dynamic sections. – parsh May 30 '13 at 22:52
@Jarek - In jsFiddle you shared, is there any way to stop 1st tab/panel from getting open after adding question dynamically? Each time we add question, it causes 1st tab to open. I dont want this behavior. All panels should be in collapsed/closed state. Any thoughts/ideas? – C.P. May 25 '15 at 11:02
1

This is old, but to answer @Chetan since I also wanted that behavior, use the [active](http://api.jqueryui.com/accordion/#option-active) option by adding .accordion("options", "active", 2) – LoJo Jul 26 '18 at 02:35

score 7 · Answer 2 · edited May 23 '17 at 12:00

7

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");
});

edited May 23 '17 at 12:00

Community

1
1

answered Jan 15 '14 at 12:14

Plch

71
1
1

score 1 · Answer 3 · answered Jan 18 '13 at 05:14

1

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

answered Jan 18 '13 at 05:14

unibasil

478
8
18

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

3 Answers3

Linked