3

I wanted to build a accordion menu with drag and drop sortable capabilities, I could build it using bootstrap 3 + jQuery UI, but the problem is jQuery UI is conflicting with general operation of a bootstrap accordion. I'm very specific on using Bootstrap Accordion, but I need to resolve the problems produced by jQuery UI.

  • Sometimes on sorting either one tab disappears
  • When one tab is open and sorted, the closing is done only when the other tab is clicked.
  • Improper arrangements of the sort order when tabs are open.

I have consolidated it in a plnkr 

$(function(){
   $( "#accordion" ).accordion().sortable({
      connectWith: "#dropBag"
   }); 

   $( "#dropBag" ).sortable({
      connectWith: "#accordion"
   }); 
});

http://plnkr.co/edit/LpQuO9nfB4d5Nwhaj6my?p=preview

Please Help.

István
  • 5,057
  • 10
  • 38
  • 67
cs1193
  • 1,090
  • 1
  • 16
  • 28
  • What does accordion() function do? I've replaced it with collapse() - isn't this what you want? – Ilya Luzyanin Jul 30 '14 at 07:33
  • Jquery ui's Sortable is meant to work with lists, what makes you think it would work with a Boostrap accordion? Here's a SO thread with an alternative option, though the collapsing bit would need to be added: http://stackoverflow.com/questions/20424477/responsive-sortable-list-supporting-drag-drop-for-bootstrap – NicoFerna Jul 30 '14 at 07:35
  • @IlyaLuzyanin thanks collapse() worked. – cs1193 Jul 30 '14 at 07:40
  • @NicoFerna I don't want to use something like jquery.sortable.js for one functionality, there are other usages of jquery-ui in my project, so I wanted to finish with that. I'm sorry about it. – cs1193 Jul 30 '14 at 07:43
  • Well, this doesn't solve your sorting problem - I couldn't understand what do you want to get as a result? – Ilya Luzyanin Jul 30 '14 at 07:43

1 Answers1

2

You have a little error in your script - accordion() should be replaced with collapse() (see Collapse paragraph in documentation. Rewrite your code as follows:

$(function(){
   $( "#accordion" ).collapse().sortable({
      connectWith: "#dropBag"
   }); 

   $( "#dropBag" ).sortable({
      connectWith: "#accordion"
   }); 
});

Plus, there is unclosed div at the end of your markup (dropBag). I can update my answer as soon as I'll understand the sorting problem you have.

Ilya Luzyanin
  • 7,910
  • 4
  • 29
  • 49