最初のテーブル要素を表示div内の次の表要素を非表示

Question

urlの値に基づいて別のサイトのコンテンツを生成するdiv要素（id = "dd-container"）があります。ページが読み込まれ、URLが読み込まれ、divのコンテンツが読み込まれます。 divの中には3つのテーブルがあり、それぞれにtheadとtbodyがあります。外部サイトのテーブル要素には、取得できるidsやクラスがありません。私は、すべての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> 

これを行う方法を持つ任意の助けいただければ幸いです。ありがとうございました。

EDIT：私たちは原因APIへの全体的なアプローチをスクラップ持っていたが

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を再度呼び出すたびに適用する方法を理解できませんでした。

提案に感謝します。私はコメントすることはできません

Answer 1

は、あなたのJSコードを依頼するが、私はそれが何をしたいexaclyますブートストラップの崩壊例Check it here

からアコーディオンを使用してお勧めします。

と正直に言うと...テーブルは、あなたはもう使うべきではないものですが、それだけで、モバイルフレンドリーではありません：D