I have accordion is collapsible and sortable.

Look here full code in action <http://jsfiddle.net/wvtPw/>

And this the JS code I'm using

```
$( "#accordion" )
    .accordion({
        header: "> div > h3",
        collapsible: true
    })
    .sortable({
        handle: "h3",
        placeholder: "ui-state-highlight",
        stop: function( event, ui ) {
            // IE doesn't register the blur when sorting
            // so trigger focusout handlers to remove .ui-state-focus
            ui.item.children( "h3" ).triggerHandler( "focusout" );
        }
    });

```

The only problem when I'm trying to sort the expanded div group is big and hard to sort and when its the first div and you drag it, you can't see below it because if the height size

![enter image description here](https://i.stack.imgur.com/mO00L.jpg)

***See this image below is example of collapsed div, see how easy to use and you can see below it easily.***

![enter image description here](https://i.stack.imgur.com/1Hg4n.jpg) 

**So what I need to reach is when the user trying to sort expanded div, the flying div turn into collapsed shape like this**

![enter image description here](https://i.stack.imgur.com/vPPJW.jpg)

**And when he drop the element just turn back to expanded like normal**