Remote Accordion Content

Dynamically loading jQuery UI accordion panels with remote content.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.2/jquery.mockjax.min.js"></script>
<div id="accordion">
     <h3><a href="section1.html">test 1</a></h3>

    <div>
        <p>Loading...</p>
    </div>
     <h3><a href="section2.html">test 2</a></h3>

    <div>
        <p>Loading...</p>
    </div>
</div>

CSS

body {
    font-size: 0.8em;
}

JavaScript

(function ($) {

    // Setup the two mock server end points - simple HTML content.
    $.mockjax({
        url: "section1.html",
        dataType: "html",
        responseText: "<html><body><p>Section1 Content</p></body></html>"
    });

    $.mockjax({
        url: "section2.html",
        dataType: "html",
        responseText: "<html><body><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p><p>Section2 Content</p></body></html>"
    });

    // The main program.
    $(function () {

        // Instrantiate our accordion widget.
        $("#accordion").accordion({

  

            // Called when the accordion is created. Here we want to
            // load...