Question

Hi I am trying to implement a feature with jquery accordion much like the MS Outlook accordion feature where, when I minimize the accordion,there is an area at the bottom where the accordions are put and when I maximize the height of the accordion the elements are taken back to accordion container.

Well,I don’t know how to do that and if anyone has any idea,please help me .This the first question.

So as an alternate solutions I thought of doing that like drag and drop. I want to put a div at the bottom of the accordion where I can drop the current accordion elements. The thing I want to implement and have done some parts are:

1. I’ve made accordion elements sortable so that I can drag and drop to that div
2. I’ve made a div where I want to put/drop the accordion elements,hence made that dropapble
3. When I drop from accordion container to bottom container, it should remove that from accordion and put the dropped object into that bottom div but show as icon to users.
4. By bottom container is also sortable/draggable and I can put back the accordion element from bottom to top accordion elements.
5. When I drop from bottom to top, bottom will remove that element and top will append that.

I have already started to implement and here is the code in JSFIDDLE Custom accordion D&N.

The problem I am facing is

• when I drop the jquery ui.element object how to store that in that div and show as icon.
• And the points 3-5 above.

Answer 1

I’m not entirely sure what you’re going for but this might be a little closer:

http://jsfiddle.net/8SUbN/12/

$(function() {

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

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

});