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?
Source: Tips4all
I haven't tested it, but this should probably work:
ReplyDeleteSay 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.
You might want to look at the LiveQuery plugin: http://plugins.jquery.com/project/livequery
ReplyDeleteIt allows you to add events and binding after the DOM is loaded.
To add a new section, and keep the old one active:
ReplyDeletevar 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});