title: Jquery accordion drag and drop to a drop area
body: <p>Hi I am trying to implement a feature with <strong>jquery</strong> accordion much like the <strong>MS Outlook</strong> 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. </p>
  
  <p>Well,I don't know how to do that and if anyone has any idea,please help me .This the first question.</p>
  
  <p>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:</p>
  
  <ol>
  <li>I've made accordion elements sortable so that I can drag and drop to that div</li>
  <li>I've made a div where I want to put/drop the accordion elements,hence made that dropapble</li>
  <li>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.</li>
  <li>By bottom container is also sortable/draggable and I can put back the accordion element from bottom to top accordion elements.</li>
  <li>When I drop from bottom to top, bottom will remove that element and top will append that.</li>
  </ol>
  
  <p>I have already started to implement and here is the code in <strong>JSFIDDLE</strong> <a href="http://jsfiddle.net/8SUbN/7/" rel="nofollow">Custom accordion D&amp;N</a>.</p>
  
  <p>The problem I am facing is</p>
  
  <ul>
  <li>when I drop the jquery ui.element object how to store that in that div and show as icon.</li>
  <li>And the points 3-5 above.</li>
  </ul>