JQuery accordion which does not open itself after being dragged and dropped

JQuery accordion which does not open itself after being dragged and dropped

Hello everybody,

I have the following HTML logical blocks :

  • The first one is a sortable accordions list The second is a list of draggable accordions.
  • Thoses elements can be added to the sortable accordions.

So I would like to move my draggable elements in order to add them with the sortable accordions. It works fine, excepts that when my element is dropped among the sortable accordions, it cannot be opened.

Here is my JavaScript code : 
  1. $(function() {
    $
    ( "> div", "#questionsDispos" ).draggable({
        helper
    : "clone",
        revert
    : "invalid",
        cursor
    : "move",
        handle
    : "h3",
        connectToSortable
    : ".questions"
    });

    $

    ( ".questions" ).accordion({
        header
    : "> div > h3",
        collapsible
    : true,
        active
    : false,
        autoHeight
    : false
    }).sortable({
        handle
    : "h3",
        receive
    : function(event, ui) {
            $
    (ui.item).removeClass();
            $
    (ui.item).removeAttr("style");
        
    }
    });

    $

    ( "#questionsDispos" ).accordion({
        header
    : "> div > h3",
        collapsible
    : true,
        active
    : false,
        autoHeight
    : false
    });
    });
And here is my HTML :
  1. <div class="questions">
        
    <div>
            
    <h3><a href="#">Question 1. My First Question ?</a></h3>
            
    <div>
                First content
    <br />
            
    </div>
        
    </div>

        

    <div>
            
    <h3><a href="#">Question 2. My Second Question ?</a></h3>
            
    <div>
                Second content
    <br />
            
    </div>
        
    </div>

        

    <div>
            
    <h3><a href="#">Question 3. My Third Question ?</a></h3>
            
    <div>
                Third content
    <br />
            
    </div>
        
    </div>
    </div>

    Questions disponibles :

    <br />
    <div id="questionsDispos">
        
    <div>
            
    <h3><a href="#">Something</a></h3>
            
    <div>
                My Content Here
    <br />
            
    </div>
        
    </div>
    </div>
Please note that I use a patched version of jquery-ui-1.8.11.custom.min.patch.js in order to use ui.item in the receive event of sortable. (I use it to remove some classes in order to make the moved element look like the other ones). You can download it here : http://www.toofiles.com/fr/oip/documents/js/jquery-ui-1811customminpatch.html


I posted a demo here so you can test it : http://jsfiddle.net/t3tVA/
As you can see, when you drop "Something" among the accordions on the top, it can not be opened anymore



Does anyone have a solution ? Thanks