jQuery Accordion and loading content through AJAX

Question

I would like to load the content under each jQuery accordion header using the jQuery load command. Currently, I have set this up as the following

$(function() {

    $("#accordion").accordion({          
        header: "h2",
        active: false              
    });

    $("h2", "#accordion").click(function(e) {
        var contentDiv = $(this).next("div");
        contentDiv.load($(this).find("a").attr("href"));      
    });                    
});

and the HTML (relevant snippet)

<div id="accordion">
    <div>
        <h2><a href="home.htm">Home</a></h2>
        <div>
           <!-- placeholder for content -->
        </div>
    </div>
    <div>
        <h2><a href="products.htm">Products</a></h2>
        <div>
           <!-- placeholder for content -->       
        </div>
    </div>
</div>

Now this all works fine, but there is a problem in that loading content in this manner interrupts the slide down animation of the accordion plugin on some browsers (IE6), and on others (FF), the slide down animation does not occur.

I'm thinking that I would need to prevent the slide down animation from occurring until the content has loaded (using the load callback function) but am unsure how to hook this into the accordion plugin.

Any ideas greatly appreciated!

Answer 1

Just thinking outside the box for a moment, is there any reason you're using ajax to load the content? It looks, from your example at least, as if the content could just be loaded initially and be done with it.

As for your actually question, have you tried something like this:

var contentDiv = $(this).find("div");

or explored any other way in which your loading might be interfering with the accordian's view of the DOM tree? (e.g., trying loading a more deeply nested div)?

Answer 2

I've just done something similar, and found the trick was to load the content from an ajax request as soon as the DOM is ready, and enable to accordion in the request's callback function.

I tried doing it with jquery's load function, but had trouble, ended up using the ajax function instead.

In your case with multiple ajax calls, i guess you could nest each one in the callback function of the previous. Which is really a horribly inefficient way to do it but if they're just small text files it should be ok.

example as follows:

$.ajax({type:"get",url:"home.htm",success: function(data){
    $("#homeDiv").html(data);
    $.ajax({type:"get",url:"products.htm",success: function(data){
            $("#productsDiv").html(data);
            $("#accordion").accordion();
        }
    });
}});

that should do it...

Answer 3

I run in to same problem while trying to load accordion in to ajax tabs with Jquery UI. The accordion cannot be initialised before you destroy it.

Here is example javascript code:

    $("#navigation").tabs({ 
    show: function(ui) {
        $('#browse').accordion('destroy').accordion({autoHeight: false, collapsible: true , active: false, header: 'h3'});
    } 
});

Answer 4

This should solve your issue:

    $('#accordion').accordion({ 
 changestart: function(event, ui){
  var clicked = $(this).find('.ui-state-active').attr('id');
  $('#'+clicked).load('/widgets/'+clicked);
 }
});

The trick to it is that accordion changes the classes of the live container, so you can use .find() to locate the active accordion and perform an action on it.

Answer 5

Hi guys,

im a beginner in jquery and I need a similar accordion as russ cam but i need an accordion to send one variable to the div that is loading a content so that i can output the content from db...

so if you can help me i would really appreciate that ;)

Answer 6

$( "#accordion" ).bind( "accordionchange", function(event, ui) {
if (ui.newHeader.text()=="LaLaLa"){ do here .... } });