I am quite new to jQuery, and even more to accordion. Would like to seek help on the following problem. I had a form which is in tabular format. However, I want to use accordion to collapse the table and only expand it when the user require to input data in it. I had search many sites for solutions but to no avail. Would like to seek any kind souls here for help. Your help will be much appreciated. The following are my codes:

jQuery Code:

2. jQuery(window).load(function() {
3.           jQuery("#accordion" ).accordion({
4.          collapsible: true
5.         });
6.            });

HTML Code:

1. 
   
2. <div id = "accordion">
3.             <h1>Identification Document</h1>
4.             <div>
5.                 <table style="width:100%">
6.                     <thead>
7.                     <tr>
8.                     <td width="95%"></td>
9.                         <td width="5%">
10.                          <input type ="hidden" id="reference" name="reference" value ="${reference}" />
11.                          <g:actionSubmit style="border: 1px solid #ccc;" class="save" size="20px" action="createCheckList" value="Save" onclick="return validateForm()" align="right"/>
12. <%--                    <a href="#" onclick="return validateForm()">To Save</a>--%>
13.                         </td>
14.                 </tr>
15.                         <tr>
16.                             <g:sortableColumn property="docName" title="${message(code: 'document.docName.label', default: 'Name')}" />
17.                             <g:sortableColumn property="docDescription" title="${message(code: 'document.docDescription.label', default: 'Description')}" />
18.                             <g:sortableColumn property="status" title="${message(code: 'document.docDescription.label', default: 'Status')}" />
19.                             <g:sortableColumn property="channel" title="${message(code: 'document.docDescription.label', default: 'Channel')}" />
20.                             <g:sortableColumn property="refno" title="${message(code: 'document.docDescription.label', default: 'Refer No')}" />
21.                             <g:sortableColumn property="reason" title="${message(code: 'document.docDescription.label', default: 'Reason')}" />
22.                         </tr>
23.                     </thead>
24.                     <tbody>
25.                     <g:each in="${idDocList}" status="i" var="idDocList">
26.                         <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
27. <td width="10%">${idDocList.docName}</td>
28. <td width="20%">${idDocList.docDescription}</td>
29. <td width="5%">
30. <g:select id="${idDocList.statusName}" name="${idDocList.statusName}"  from="${statusList}" 
31.                             style = "border: solid;border-color: plum; !important;"
32.                         />
33.                             </td>
34.                             <td width="5%">
35. <g:select id="${idDocList.channelName}" name="${idDocList.channelName}"  from="${channelList}" 
36.                             onChange = "updateReferList(this.value,'${idDocList.referName}')" 
37.                             style = "border: solid;border-color: plum; !important;"
38.                         />
39.                     </td>
40.                             <td width="7%">
41. <input type= "text" id ="${idDocList.referName}" name ="${idDocList.referName}" value ="${reference}"/>
42.                             </td>
43.                             <td width="15%">
44.                               <g:textArea name="${idDocList.reasonName}" style="width:400px ; height:40px"/>
45.                               <div id ="${idDocList.statusName+'Div'}" name="${idDocList.statusName+'Div'}"></div>
46.                             </td>
47. <%--                            <td width="10%">--%>
48. <%--                             <a href="#bottom">To Bottom</a>--%>
49. <%--                            </td>--%>
50.                         </tr>
51.             </g:each>
52.                     </tbody>
53.                 </table>
54.             </div>
55.             <h1>Employment Detail Document</h1>
56.             <div>
57.                 <table style="width:100%">
58.                     <thead>
59.                      <tr>
60.                     <td width="95%"></td>
61.                         <td width="5%">
62. <%--                    <a href="#" onclick="return validateForm()">To Save</a>--%>
63. <g:actionSubmit style="border: 1px solid #ccc;" class="save" size="20px" action="createCheckList" value="Save" onclick="return validateForm()"/>
64.                          </td>
65.                 </tr>
66.                         <tr>
67.                             <g:sortableColumn property="docName" title="${message(code: 'document.docName.label', default: 'Doc Name')}" />
68.                             <g:sortableColumn property="docDescription" title="${message(code: 'document.docDescription.label', default: 'Description')}" />
69.                             <g:sortableColumn property="status" title="${message(code: 'document.docDescription.label', default: 'Status')}" />
70.                             <g:sortableColumn property="channel" title="${message(code: 'document.docDescription.label', default: 'Channel')}" />
71. <%--                            <g:sortableColumn property="refno" title="${message(code: 'document.docDescription.label', default: 'Refer No')}" />--%>
72.                             <g:sortableColumn property="reason" title="${message(code: 'document.docDescription.label', default: 'Reason')}" />
73. <%--                            <g:sortableColumn property="action" title=" " />--%>
74.                         </tr>
75.                     </thead>
76.                     <tbody>
77.                     <g:each in="${employmentDocList}" status="i" var="employmentDocList">
78.                      <tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
79. <td width="10%">${employmentDocList.docName}</td>
80. <td width="20%">${employmentDocList.docDescription}</td>
81. <td width="5%">
82. <g:select id="${employmentDocList.statusName}" name="${employmentDocList.statusName}"  from="${statusList}" 
83.                             onChange = "updateReferList(this.value,'${employmentDocList
84. .referName}')" 
85.                             style = "border: solid;border-color: plum; !important;"
86.                         />
87.                             </td>
88.                             <td width="5%">
89. <g:select id="${employmentDocList.channelName}" name="${employmentDocList.channelName}"  from="${channelList}" 
90.                             style = "border: solid;border-color: plum; !important;"
91.                         />
92.                     </td>
93.                     <td width="7%">
94. <input type= "text" id ="${employmentDocList.referName}" name ="${employmentDocList.referName}" value ="${reference}"/>
95.                             </td>
96.                             <td width="15%">
97.                               <g:textArea name="${employmentDocList.reasonName}" style="width:400px ; height:40px"/>
98.                               <div id ="${employmentDocList.statusName+'Div'}" name="${employmentDocList.statusName+'Div'}"></div>
99.                             </td>
100. <%--                            <td width="10%">--%>
101. <%--                             <a href="#top">To Top</a>--%>
102. <%--                            </td>--%>
103.                         </tr>
104.                     </g:each>
105.                     </tbody>
106.                 </table>
107.             </div>

Thanks in advance for everyone's help :)