Question

I am new to javascript and jquery guys plz help,

I have a list which I drag such as

<ul class='drag-list'>
    <li>category 1</li>
    <li>category2</li>
    ------------
    ------------
</ul>

and drop it on

<div class='dropArea'>
    <div id="accordion"></div>
</div>

when I drop the list it should be converted to accordin

My drag and drop code is

$( ".drag-list li" ).draggable({        
    helper:"clone"
});

$( ".dropArea" ).droppable({        
    drop:function(event,ui){        
        addCategory(ui.draggable.html());       
        $( "#accordion" ).accordion({
            collapsible: true,
            header:'h3'
        });
    }
});


Category = function(item){
    var category = $("<h3><a href='#'>"+item+"</a></h3> \
                      <div> \
                      <p>hello I am accordion</p> \
                      </div>");
    return category;
}

function addCategory(item) {
    var category = Category(item);
    $('#accordion').append(category);
}

only the first drag li gets the accordion afterwards no class is added

I also used addClass(‘ui-accordion’) on category object but still not working

plz help I can’t figure it out

http://jsfiddle.net/ZXYrx/

below is the screenshot of what i want

Answer 1

You have to recreate the accordion on each drop, so do the following:

    $( "#accordion" ).accordion('destroy').accordion({
        collapsible: true,
        header:'h3'
    });

If destroy removes your content, then take it first var html = $('#accordion').html(); and then destroy. Afterwards set the content before recreating.