How do I load content in JQuery Accordion via AJAX

Question

I have a jquery accordion that loads a lot of data. This accordion is generated by querying a database. My question - is there a way to not load the content until a specific element of the accordion has been clicked? Basically, I'd like to replicate the functionality of the jquery tab ajax content load to the accordion.

Answer 1

Can't you just bind a handler to the "change" event?

Answer 2

I am using jquery ui-1.11.4 and had this same issue. This is the solution I pieced together.

The Javascript:

var already_loaded = new Object();  // used to track which accordions have already been loaded

$(function() {
    $( "#accordion" ).accordion({
        collapsible: true,
        active: false,
        //heightStyle: 'fill', // http://jqueryui.com/accordion/#fillspace  -- Just sets the height of the accordion to the height of it's parent container.  We need a way to change the height of the parent to that of the newly added content.
        activate: function (e, ui) {
            // only fire when the accordion is opening..
            if(ui.newHeader.length>0){                
                // only retrieve the remote content once..
                if(! already_loaded[ui.newHeader[0].id]==1){
                    var srcObj = $(ui.newHeader[0]).children('a');
                    var url = srcObj.attr('href');
                    var folder = srcObj.attr('data-folder');
                    //$.get(url, function (data){  // if you wanted to use the GET method uncomment this and comment the next line.  Be sure to add any needed query string parameters to the URL.
                    $.post(url, {doCmd:'getFolderFiles', folder:srcObj.attr('data-folder')}, function (data){
                        $(ui.newHeader[0]).next().html(data);
                        var contentDiv = $(ui.newHeader[0]).next()[0];
                        $('#'+contentDiv.id).height(contentDiv.scrollHeight);
                        //$("#accordion").accordion("refresh"); // http://api.jqueryui.com/accordion/#method-refresh -- The documentation isn't clear on this but this only refreshes added/removed panels.  Does not refresh existing panels with newly added content.
                        already_loaded[ui.newHeader[0].id]=1; // keep track of the loaded accordions
                    });
                }
            }
        }

    });

});

The HTML:

<div id="accordion">
      <h3><a href="program_to_generate_accordion_content.php" data-folder="2015">2015 Files</a></h3>
      <div>
          <p>
              Loading... Please wait.
          </p>

      </div>

      <h3><a href="program_to_generate_accordion_content.php" data-folder="2016">2016 Files</a></h3>
      <div>
          <p>
              Loading... Please wait.
          </p>
      </div>
</div>

Answer 3

Check out this question and this blog entry, it might point you in the right direction.

Answer 4

you can check this link in this site, I think it is very helpfull.

jQuery Accordion and loading content through AJAX