Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add items to a jQuery Accordion with jquery

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?

like image 899
espenhogbakk Avatar asked May 26 '09 13:05

espenhogbakk


People also ask

How to add accordion in jQuery?

jQuery UI Accordian is an expandable and collapsible content holder that is broken into sections and probably looks like tabs. Syntax: You can use the accordion () method in two forms: $(selector, context).

What does the jQuery accordion widget do?

The jQuery UI Accordion Widget can be used for the conversion of pairs of header & content panels into an accordion. The jQuery UI Accordion create event is used to trigger when the accordion is created. If an accordion widget is collapsed, then the ui. header and ui.

How do I close accordion on click?

By default, there is no option to close the accordion on click but there is a solution. Add the code to Theme options General options Custom CSS/JS Custom JS field.


2 Answers

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

like image 62
Jimmy Stenke Avatar answered Sep 21 '22 02:09

Jimmy Stenke


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}); 
like image 26
Wesley Avatar answered Sep 21 '22 02:09

Wesley