Loading large div content with jquery ajax call. Accordions inside of div loaded are not working

I have one accordion inside of each section loaded (only one section shows at a time). All accordions have different ids, none are working.

$("#accordion1").accordion({
header: "h4", active: 开发者_高级运维false, collapsible: true 
});

$("#accordion2").accordion({
header: "h4", active: false, collapsible: true 
});

You should get sure that your JavaScript gets executed, when your content is loaded via AJAX.

A recommendation is to wrap your functions inside the famous $(document).ready() function:

$(function(){
    $('#accordion1').accordion({});
});

$(function(){
    $('#accordion2').accordion({});
});

From your description, I'd guess that you're doing something like this:

$("#accordion1").accordion({
    header: "h4", active: false, collapsible: true 
});
$("#accordion2").accordion({
    header: "h4", active: false, collapsible: true 
});

// And later on...
$('#section').load('/gimme/accordion1');

And the stuff that you're loading from /gimme/accordion1 contains #accordion1. That won't work because $('#accordion1') looks at the DOM when it is called and doesn't find an #accordion1 to bind anything to; the later, when you load #accordion1 into the DOM, it won't have an accordion bound to it because your $('#accordion1').accordion(/*...*/) call was done before there was an #accordion1.

You have to hook up the accordion widget when the accordion's HTML is in the DOM. Whatever function you're using to load your HTML should have a callback function that is called when the HTML is loaded so you can use that to hook up your widgets; for example, if you're using load:

$('#section').load('/gimme/accordion1', function() {
    $("#accordion1").accordion({
        header: "h4", active: false, collapsible: true 
    });
});