Question

How to implement dynamic content loading in jQuery Accordion Widget panels?

Answer 1

Here's how to load content dynamically into jQuery UI Accordion panels:

Basic Implementation

<div id="accordion">

  <h3>Section 1</h3>

  <div data-source="section1.html"></div>

  <h3>Section 2</h3>

  <div data-source="section2.html"></div>

</div>


JavaScript Code

$(function() {

  $("#accordion").accordion({

    collapsible: true,

    beforeActivate: function(event, ui) {

      var newPanel = ui.newPanel;

      if (newPanel.is(":empty") && newPanel.data("source")) {

        newPanel.html("<div class='loading'>Loading content...</div>");

        $.get(newPanel.data("source"), function(data) {

          newPanel.html(data);

        }).fail(function() {

          newPanel.html("<div class='error'>Failed to load content</div>");

        });

      }

    }

  });

});