Add items to a jQuery Accordion with jquery

Solution 1:

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

Solution 2:

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

Solution 3:

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