drage header and body of accordion

Question

Hi ,

I am using Jquery Accordion and Jquery Sortable and Draggable.

I have created an accordion and i want to make accordion header and its content body draggable at the same time.

now the problem is if is attach draggable/sortable to accordion directly then h3 (header of accordion) and div (content body of accordion) elements are draggred separately but i want to drag the h3 and div both at the same time. to achieve it i tried to put h3 and div both in a separate div block but then accordion would not perform normally so how to club h3 and div to drag them as a whole block ?

Javascript

$("#accordion").accordion();
$("#accordion").sortable();

HTML is as follows

<div id="accordion">
    <h3>
       <div> Option One </div>
    </h3>
    <div>
       <p>Content 1</p>
    </div>
    <h3>
       <div> Option Two </div>
    </h3>
    <div>
       <p>Content 2</p>
    </div>
</div>

Answer 1

use following link http://jqueryui.com/demos/accordion/#sortable