Add items to a jQuery Accordion with jquery

Question

I am using the jQuery accordion plugin to make an accordion of some data. Then I want the user to be able to add more data to the accordian. I have setup the accordion to function properly, then I've made a function that prepends a "list item" to the accordion that matches the accordion semantics.

Is it possible to "update" the accordion so that it works with the newly added element, without saving the new data to database and refreshing the page?

Something like this:

.accordion('refresh')

Or something like the live event added in jQuery 1.3, anybody got a clue?

jquery 1.10 has this functionality working properly. In case you're still stuck on this problem 3 years later — Shaz, Jan 23 '13 at 22:04

score 100 · Accepted Answer · edited May 14 '14 at 00:03

100

I haven't tested it, but this should probably work: Say that you have your accordion with id #accordion

$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion();

Basically, just destroy and re-create the accordion.

UPDATE:

Since this answer was written a refresh() method has been added to the accordion widget. It can be invoked by calling:

$( ".selector" ).accordion( "refresh" );

You can read more about this method here

edited May 14 '14 at 00:03

Ted A.

2,084
12
22

answered May 26 '09 at 13:33

Jimmy Stenke

10,950
2
22
20

Googled this for about ten minutes before thinking of looking here. – Benjamin Autin Jun 05 '09 at 14:49
1

Thank you - that did the trick for me. One question though! I am adding a section dynamically but when I re-create the accordion it opens the first section again. Is there any way I can stop it from doing that, and kept the previously expanded section? Thanks again. – codedog Jul 21 '10 at 03:07
Yep same issue as DanyW, this code will open the first section – Doug Molineux Jun 21 '11 at 20:05
1

Now I haven't worked with this for a year, but one way you can do it is to name the sections (I think it should work if you instead of `Paragraph 1` write `Paragraph 1` in the title and also add `{navigation:true}` to your options – Jimmy Stenke Jun 27 '11 at 19:58
this works well for me. is it possible to add some kind of animation / effect to further emphasize to the user that the accordion has been updated? – HBCondo Feb 04 '12 at 02:09
`$("#accordion").accordion({active:"h3:last"})` – casey Jul 20 '12 at 14:43
FYI, if you want to reuse your code for the initial constructor as well as the refresh, it's a little messy, but you can do this: `$('#accordion').accordion().accordion('destroy').accordion();` – devlord Oct 27 '12 at 22:58
Regarding @DanyW... Before detroying the accordian, used the active() getter to remember which element is opened (active). Then when recreating the accordian, specify that the remembered section is the active one. Of course this depends upon where the dynamically added elements were appended and the value of the "remembered" active element (an index) may need to be adjusted. Not sure which version of jQuery this was added. – Phil DD Jun 07 '13 at 17:28
This worked for me too, the only problem was that if you have about 60 items, it would be horrificly slow on mobile devices. – Andrei Cristian Prodan Sep 13 '13 at 15:58

score 8 · Answer 2 · answered May 24 '12 at 11:29

To add a new section, and keep the old one active:

var active = $('#accordion').accordion('option', 'active');
$('#accordion').append('<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>')
    .accordion('destroy').accordion({ active: active});

score 6 · Answer 3 · edited Feb 19 '13 at 18:02

6

As mentioned above by Shahzad, jQuery UI 1.10 has made this easier; see the documentation.

edited Feb 19 '13 at 18:02

JoshDM

4,838
7
42
70

answered Feb 19 '13 at 17:38

Mark D.

96
1
2

Tak0r · Answer 4 · 2012-08-13T14:30:03.070

Since i needed a working add/edit/delete vor accordion items i hacked this little javascript functions for this purpose

http://jsfiddle.net/Sd6fC/

h3 and div need an unique id which goes by the following convention

<h3 id="divname_hitm_<uniquenumber>"><h3>

the corresponding div need the following

<div id="divname_ditm_<samenumber as h3"></div>

sample accordion code block

<div id="divname">
    <h3 id="divname_hitm_1><a href="#">Section 1</h3>
    <div id="divname_ditm_1>
        <p>Section 1 Payload</p>
    </div>
    <h3 id="divname_hitm_2><a href="#">Section 2</h3>
    <div id="divname_ditm_2>
        <p>Section 2 Payload</p>
    </div>
</div>

have fun maybe it helps some ppl out there!

score 0 · Answer 5 · answered May 26 '09 at 13:33

0

You might want to look at the LiveQuery plugin: http://plugins.jquery.com/project/livequery

It allows you to add events and binding after the DOM is loaded.

answered May 26 '09 at 13:33

jfrobishow

2,887
2
23
42

Add items to a jQuery Accordion with jquery

5 Answers5

Linked