Jquery 테이블의 행에 대한 아코디언 HTML

Question

내 테이블에 아코디언이 필요합니다. this example이 옵션을 시도했지만 제 jquery 버전과 호환되지 않습니다. 페이지의 예제에서 jquery 버전은 1.4.4이고 내 애플리케이션에서는 jquery 버전이 1.6입니다. 이 코드는 다음 표의 jquery 버전과 호환됩니다. 원하는대로 아코디언을 사용할 수 있습니까?

<table width="900px" border="0px"> 
    <h1>My table</h1> 
    <thead> 
     <tr> 
      <th>column 1</th> 
      <th>column 2</th> 
      <th>column 3</th> 
      <th>column 4</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="title_section" colspan="4"> 
       <div id="title_section">Title 1</div> 
      </td> 
     </tr> 
     <tr> 
      <td class="title_section"> 
       <div id="title_subsection">Title subsection 1</div> 
      </td> 
     </tr> 
     <tr class="item1"> 
      <td>Item 1</td> 
      <td>xyz1</td> 
      <td>abc1</td> 
      <td>ebt1</td> 
     </tr> 
     <tr class="item1"> 
      <td>Item 2</td> 
      <td>xyz2</td> 
      <td>abc2</td> 
      <td>ebt2</td> 
     </tr> 
     <tr> 
      <td class="title_section"> 
       <div id="title_subsection">Servicios profesionales domiciliarios</div> 
      </td> 
     </tr> 
     <tr class="item1"> 
      <td>Item 3</td> 
      <td>xyz3</td> 
      <td>abc3</td> 
      <td>ebt3</td> 
     </tr> 
     <tr class="item1"> 
      <td>Item 4</td> 
      <td>xyz</td> 
      <td>abc</td> 
      <td>ebt</td> 
     </tr> 
     <tr class="total"> 
      <td colspan="2">item5</td> 
      <td colspan="2" value="0"></td> 
     </tr> 
     <tr> 
      <td class="title_section" colspan="4"> 
       <div id="title_section">Title 2</div> 
      </td> 
     </tr> 
     <tr class="item2"> 
      <td>Item 11</td> 
      <td>xyz11</td> 
      <td>abc11</td> 
      <td>ebt11</td> 
     </tr> 
     <tr class="item2"> 
      <td>Item 22</td> 
      <td>xyz22</td> 
      <td>abc22</td> 
      <td>ebt22</td> 
     </tr> 
     <tr class="item2"> 
      <td>Item 3</td> 
      <td>xyz33</td> 
      <td>abc33</td> 
      <td>ebt33</td> 
     </tr> 
     <tr class="total"> 
      <td colspan="2">dadkfdl</td> 
      <td colspan="2" value="0"></td> 
     </tr> 
    </tbody> 
</table> 

감사합니다.

Answer 1

바이올린에서와 마찬가지로 jquery UI를 포함하면됩니다.

jqueryui.com