Prepend New Section To Jquery UI Accordion When Link Is Clicked…? (Code Igniter)

Question

I'd like to add a new section to a Jquery UI accordion when someone clicks a link, either on the same page or a different page. I've looked at the append() function but the content I'd be pulling in would contain PHP as well as HTML, so it'd need to be parsed.

The link the user would be clicking would reference a database record to pull e.g. /site/index/record/3 (I'm building in Code Igniter).

What is the best way to do this?

I was thinking of using prependTo (if that's right), then pulling the content in via ajax? Not sure how that would work, clicking through from another page though.

Any ideas, suggestions, pointers or comments gratefully appreciated, as I've no idea how to do this.

Here's the accordion js I have:

$(function() { // jquery ui accordion with mods for sorting
    var stop = false;
    $("#ccaccordion h3").click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#ccaccordion")
        .accordion({
            header: "> div > h3",
            autoHeight: false,
            change:
              function(event, ui){
                ui.newHeader.parent().prependTo(this); // move the active panel to the top of the accordion
              }
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });

        $(".new_accordian").click(function( event ) {
        $('#ccaccordion').prepend("<div><h3><a href=\"#\">Section X</a></h3><div><p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p></div></div>");
    });

});

Thanks!

Answer 1

I've accomplished this by altering the HTML to add the new Accordion section then calling something like the following:

$("#days").accordion('destroy').accordion({
    autoHeight: false
    ,navigation: true
    ,collapsible: true
    ,active: false
});

Where <div id="days">...</div> is the container that holds all the accordion sections. Essentially you must destroy then re-initialize the accordion when adding new elements.

So you would get your new section via AJAX, append() the HTML to the accordion container then re-create the accordion.