첫 번째 테이블 요소 표시 div 내 다음 테이블 요소 숨기기

Question

url의 값을 기반으로 다른 사이트의 콘텐츠를 채우는 div 요소 (id = "dd-container")가 있습니다. 페이지가로드되고 url을 읽은 다음 div에 내용을로드합니다. div 안에는 3 개의 테이블이 있으며 각각은 thead와 tbody가 있습니다. 외부 사이트의 테이블 요소에는 ID 또는 클래스를 사용할 수 없습니다. 나는 thead 아이템을 숨기거나 보여주기 위해 토글을 할 수 있기를 원하지만 onload는 첫 번째 thead가 열려 있고 나머지는 닫히기를 원합니다. 또한 콘텐츠가 표시 될 때를 가리키며 콘텐츠가 숨겨져있는 경우 오른쪽을 가리키는 thead 콘텐츠의 오른쪽에 화살표를 표시 할 수 있다면 좋을 것입니다.

<div id="dd-container"> 
    <table> 
    <thead>Table 1 Header</thead> 
    <tbody> 
     <tr> 
     <td>Table 1 content</td> 
     </tr> 
    </tbody> 
    </table> 
    <table> 
    <thead>Table 2 Header</thead> 
    <tbody> 
     <tr> 
     <td>Table 2 content</td> 
     </tr> 
    </tbody> 
    </table> 
    <table> 
    <thead>Table 3 Header</thead> 
    <tbody> 
     <tr> 
     <td>Table 3 content</td> 
     </tr> 
    </tbody> 
    </table> 
</div> 

이 작업을 수행하는 방법에 어떤 도움을 크게 감상 할 수 다음과 같이

기본 테이블 구조입니다. 고맙습니다.

편집 :

jQuery('#dd-container table').each(function(i){ 
    jQuery('thead', jQuery(this)).click(function(){ 
     jQuery('tbody', jQuery(this).parent('table')).toggle(); 
    }); 
    if (i != 0){ 
     jQuery('tbody', jQuery(this).toggle()); 
    } 
}); 

우리가 인해 API에 전체 접근 방식을 스크랩 있었지만 : 이 내가 찾던이었다 밝혀졌습니다. 페이지로드시에만 실행할 수 있지만 API를 다시 호출 할 때마다 적용되도록하는 방법을 알 수 없습니다.

어쨌든 제안을 주셔서 감사합니다. 내가 언급 할 수

Answer 1

은 JS 코드를 물어,하지만 난 당신이 원하는 것을 exacly하게 부트 스트랩 축소 예를 Check it here

에서 아코디언을 사용하는 것이 좋습니다 것입니다.

하고 정직하게 .. 테이블이 더 이상 사용하지 말아야 뭔가, 그냥 모바일 친화적되지 않습니다 : D