Question

New to Bootstrap and having some issues with accordion. Hoping someone would help me resolve it.

Basically I have an empty accordion and a drop down menu. Every time a selection made in the drop down menu, it is added to the accordion, with full .accordion-group mark up, but with empty .accordion-body div. After that this accordion-group set as droppable and .ui-droppable class is automatically added.

After that I am able to drag and drop a bunch of other divs into the .accordion-group and those divs are appended to .accordion-body of this particular group. This part works fine, however, as soon as i click to expand any given .accordion-group, .ui-droppable class gets stripped from ALL of them.

How do I stop it from removing .ui-droppable class??

Steps to reproduce:

1. Use html markup from Bootstrap page:
   (For some reason I am unable to format HTML as code here by indenting it with 4 spaces,so im just pasting the link to it)
   http://twitter.github.com/bootstrap/javascript.html#collapse

2. Add JS, which makes groups droppable

   $('#accordion2').find('.accordion-group').each(function() {
$(this).droppable();
});

3. Inspect elements to make sure .ui-droppable class is set

4. Click to expand a group. Any group.

5. Inspect elements. .ui-droppable has been stipped from ALL of them

Answer 1

Resolved this, but I think it is a very stupid way to achieve the result, so I am not happy with how Bootstrap handles toggles. I really don’t think there is a need to loop though every .accordion-group to re-apply droppable attributes every single time someone opens OR closes a section.

Going to re-do it with just a button and a div for each section.

Here is the solution:

$('#host-groups').on('shown', function() {
    $('#host-groups').find('.accordion-group').each(function() {
        $(this).attr('id').droppable();

    });
});

$('#host-groups').on('hidden', function() {
    $('#host-groups').find('.accordion-group').each(function() {
        $(this).attr('id').droppable();

    });
});

/facepalm