I'm new to jquery and I'm willing to build and embedded accordion within a Sortable Connected Lists...

I already succeeded embedding the accordion within the tabs however I get two issues:

1- When I drop an accordion from one tab to another I can no more see it's content when I click on the header. I can see I can open it (the little arrow show that it is opened) but no way I can read what's inside the accordion. It's somehow "hidden"...) Looks like the div is broken somewhere. Any clue ?

2- My headers are going to be a "sentence" so my accordion will have like 400px width. Problem is when I set this width it becomes almost impossible to find the spot where to drop the accordion if I want to drop it in another tab.Any idea ?

Any help will be much appreciated !

Here is my jquery:

2. <script>
3. $(function() {
4. $( "#accordion1" ).accordion({ active: 1, collapsible: true, autoheight: true  });
5. $( "#accordion2" ).accordion({ active: 1, collapsible: true, autoheight: true  });
6. $( "#accordion3" ).accordion({ active: 1, collapsible: true, autoheight: true  });
7. $( "#accordion4" ).accordion({ active: 1, collapsible: true, autoheight: true  });
8. 
   
9. $( "#sortable1, #sortable2" ).sortable().disableSelection();
10. 
    
11. var $tabs = $( "#tabs" ).tabs();
12. 
    
13. var $tab_items = $( "ul:first li", $tabs ).droppable({
14. accept: ".connectedSortable li",
15. hoverClass: "ui-state-hover",
16. drop: function( event, ui ) {
17. var $item = $( this );
18. var $list = $( $item.find( "a" ).attr( "href" ) )
19. .find( ".connectedSortable" );
20. 
    
21. ui.draggable.hide( "slow", function() {
22. $( this ).appendTo( $list ).show( "slow" );
23. });
24. }
25. });
26. });
27. </script>

 Here is my html:

2. <div class="demo">
3. 
   
4. <div id="tabs">
5. <ul>
6. <li><a href="#tabs-1">Nunc tincidunt</a></li>
7. <li><a href="#tabs-2">Proin dolor</a></li>
8. </ul>
9. 
   
10. <div id="tabs-1">
11. 
    
12. <ul id="sortable1" class="connectedSortable ui-helper-reset">
13. <li class="ui-state-default">
14.   <div id="accordion1"> 
15.  <h3><a href="#">Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</a></h3> 
16.  <div id="bidule"> 
17.   <p> 
18.   TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1 TAB 1 Accordion 1 
19.   </p> 
20.  </div> 
21. </div>
22. </li>
23. <li class="ui-state-default">
24.   <div id="accordion2"> 
25.  <h3><a href="#">Section 2</a></h3> 
26.  <div id="bidule"> 
27.   <p> 
28.   TAB 1 Accordion 2 TAB 1 Accordion 2TAB 1 Accordion 2TAB 1 Accordion 2TAB 1 Accordion 2TAB 1 Accordion 2TAB 1 Accordion 2
29.   </p> 
30.  </div> 
31. </div>
32. </li>
33. <li class="ui-state-default">Item T1 3</li>
34. <li class="ui-state-default">Item T1 4</li>
35. <li class="ui-state-default">Item T1 5</li>
36. </ul>
37. 
    
38. 
    
39. </div>
40. <div id="tabs-2">
41. 
    
42. <ul id="sortable2" class="connectedSortable ui-helper-reset">
43. <li class="ui-state-default">
44.   <div id="accordion3"> 
45.  <h3><a href="#">Section 1 Section 1 Section 1 Section 1 Section 1 Section 1 Section 1</a></h3> 
46.  <div id="bidule"> 
47.   <p> 
48.   TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1 TAB 2 Accordion 1 
49.   </p> 
50.  </div> 
51. </div>
52. </li>
53. <li class="ui-state-default">
54.   <div id="accordion4"> 
55.  <h3><a href="#">Section 2</a></h3> 
56.  <div id="bidule"> 
57.   <p> 
58.   TAB 2 Accordion 2 TAB 2 Accordion 2TAB 2 Accordion 2 TAB 2 Accordion 2 TAB 2 Accordion 2 TAB 2 Accordion 2 TAB 2 Accordion 2
59.   </p> 
60.  </div> 
61. </div>
62. </li>
63. <li class="ui-state-default">Item T2 3</li>
64. <li class="ui-state-default">Item T2 4</li>
65. <li class="ui-state-default">Item T2 5</li>
66. </ul>
67. 
    
68. 
    
69. </div>
70. </div>
71.                   
72. </div><!-- End demo -->