Question

I would like to add the accordion to a dynamically added tab. This tab is generated by the post back data from the server. What should I do on this?

The post back data is something like

<div id ="newtab">
<div id = "accordion"> ...</div>
...
</div>

I have

$("#accordion1).accordion();

before the tab is added, but it is not working.

Answer 1

Seems like you’ve already identified the problem in the question:

$("#accordion1).accordion();

before the tab is added, but it is not working.

You need to initialize the accordion again after the new elements are added to the DOM (i.e. in the success function of your AJAX call).

Your jQuery selector $("#accordion"), is only selecting elements that are currently in the document. You could use a plugin like .livequery to call the function you want automatically on new elements.

---

If you’re not opposed to using the livequery plugin mentioned above, here’s an example:

$("#accordion").livequery(function () {
    $(this).accordion();
});

This will make any element added to the DOM with the id #accordion into an accordion.

Example: http://jsfiddle.net/andrewwhitaker/HBFnJ/