Comment puis-je charger le contenu dans JQuery Accordion via AJAX

Je suis à l'aide de jquery ui-1.11.4 et ont eu ce même problème. C'est la solution que j'ai reconstitué.

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

    });

});

Le code 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>

OriginalL'auteur Drew

vous pouvez consulter ce lien dans ce site, je pense que c'est très utile.

jQuery Accordion et chargement de contenu via AJAX

OriginalL'auteur Omar Sawalhah