JQuery UI Auto-Sortable Accordian - is this possible?

Question

I want to have something similar to the sortable accordian in JQuery UI, that automatically sorts itself i.e. the active accordion panel (the open one - last one clicked) automatically moves to the top of the accordion.

Any ideas?

Here's the link to the JQ UI page: http://jqueryui.com/demos/accordion/#sortable

Thanks!

Here's the code I have (in reply to Thomas) :

$(function() {
    var stop = false;
    $("#ccaccordion h3").click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });

    $("#ccaccordion")
        .accordion({
            header: "> div > h3",
            autoHeight: false,
            "option",
            "change",
            function(event, ui){
              ui.newHeader.parent().prependTo(this);
            }
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });

});

Answer 1

Add this code to the demo example:

$('#accordion')
  .accordion(
    'option',
    'change',
    function(event, ui){
      ui.newHeader.parent().prependTo(this);
    }
  );

Edit:

Modification of your code:

$(function() {
    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);
              }
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });

});

Answer 2

I realize this is an older thread, but I discovered that changing 'change' to 'changestart' causes the slide to occur after the sorting has taken place, which looks much better in my opinion.

If you prefer as I do to have the slide take place after the sorting has, you can change this:

$('#accordion')
    .accordion(
        'option',
        'change',
    function(event, ui){
        ui.newHeader.parent().prependTo(this);
    }
);

To this:

$('#accordion')
    .accordion(
        'option',
        'changestart',
    function(event, ui){
         ui.newHeader.parent().prependTo(this);
    }
);

Add this to the jQuery UI Accordion sorting demo and the heading clicked will A. immediately sort itself to the very top, and B. slide open.