Question

I have a problem with the jquery sortable plugin. Indeed, I have items (questions) which use both accordion and sortable.

I use the update event of sortable to show extra content in each question accordion.

But my problem is that after sorting the questions, the accordion of the one I moved opens itself automatically.

Here is a simple example which reproduces the problem : http://jsfiddle.net/JwzH2/1/

Try to sort the questions, and you’ll see the accordion opening itself (it might work correctly sometimes, so try again).

Do someone have an idea on how to fix it ?

EDIT : Fosco gave me a partially working solution, but there is still a problem => it does not work on dynamically added elements (see my comments on his answer).

Moreover, I am still astonished seeing the code working without this line : $('.hidden-content', question).show();. Indeed, the event propagation should be the same with and without this line

http://jsfiddle.net/JwzH2/38/

Answer 1

I believe your answer lies here in the sample code from jQuery UI: http://jqueryui.com/demos/accordion/sortable.html

$(function() {
    var stop = false;
    $( "#accordion h3" ).click(function( event ) {
        if ( stop ) {
            event.stopImmediatePropagation();
            event.preventDefault();
            stop = false;
        }
    });
    $( "#accordion" )
        .accordion({
            header: "> div > h3"
        })
        .sortable({
            axis: "y",
            handle: "h3",
            stop: function() {
                stop = true;
            }
        });
});
</script> 

Notice the use of a stop variable, and how it is caught and manipulated by both the sorting mechanism and the click handler.

Edit: I spent a bit of time this morning playing with your dynamic content issue and here’s what I came up with. When a new item is added, I destroy and re-set the accordion and the appropriate click handlers. I moved the click handler setup and the accordion setup into functions, and call them initially and when a new item is added. It happens so quick that I don’t see any flicker or visual problems, but your mileage may vary. Give it a shot here: http://jsfiddle.net/JwzH2/41/