はアコーディオンは、私は私のプロジェクトに取り組んでいる

Question

データテーブルの2ページ目を表示していないとjQueryアコーディオンは、データテーブルの2ページ目に表示されていないように思えます。ここに私のコードです：

のjQuery：

$(document).ready(function() { 
$('#myTable').DataTable({ 
    "pageLength": 5 
}); 


for (var x = 1; x <= 10 ; x++) { 
    $('#accordion_' + x).find('.accordiontoggle-' + x).click(function() { 

     //Expand or collapse this panel 
     $(this).next().slideToggle('fast'); 


     //Hide the other panels 
     $(".accordioncontent-" + x).not($(this).next()).slideUp('fast'); 

    }); 
} 

}); 

HTML：

<table id="myTable"> 
<thead> 
    <tr> 
     <th>PO#</th> 
     <th>Vendor Name</th> 
     <th>Order Date</th> 
     <th>Items</th> 
     <th>Total Amount</th> 
     <th>Status</th> 
    </tr> 
</thead> 
<tbody> 
    <tr> 
    <td>1</td> 
    <td>Sample1</td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_1" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-1">2 more</a> 
      <div class="accordion-content default accordioncontent-1"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
    <tr> 
    <td>2</td> 
    <td>Sample2</td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_2" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-2">2 more</a> 
      <div class="accordion-content default accordioncontent-1"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>Sample3</td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_3" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-3">2 more</a> 
      <div class="accordion-content default accordioncontent-3"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
    <tr> 
    <td>4</td> 
    <td>Sample4</td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_4" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-4">2 more</a> 
      <div class="accordion-content default accordioncontent-4"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
    <tr> 
    <td>5</td> 
    <td>Sample5</td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_5" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-5">2 more</a> 
      <div class="accordion-content default accordioncontent-5"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
    <tr> 
    <td>6</td> 
    <td>Sample6</td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_6" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-6">2 more</a> 
      <div class="accordion-content default accordioncontent-6"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
    <tr> 
    <td>7</td> 
    <td>Sample7</td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_7" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-7">2 more</a> 
      <div class="accordion-content default accordioncontent-7"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
    <tr> 
    <td>8</td> 
    <td>Sample8</td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_8" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-8">2 more</a> 
      <div class="accordion-content default accordioncontent-1"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
    <tr> 
    <td>9</td> 
    <td>Sample9</td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_9" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-9">2 more</a> 
      <div class="accordion-content default accordioncontent-1"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
    <tr> 
    <td>10</td> 
    <td>Sample10<td> 
    <td>January 1, 1990</td> 
    <td> 
     <div id="accordion_10" class="accordion"> 
      <span>Item +</span> <a class="accordion-toggle accordiontoggle-10">2 more</a> 
      <div class="accordion-content default accordioncontent-10"> 
       <ul> 
        <li> Item 1</li> 
        <li> Item 2</li> 
        <li> Item 3</li> 
       </ul> 
      </div> 
     </div> 
    </td> 
    <td>1.00</td> 
    <td>Open</td> 
    </tr> 
</tbody> 
</table> 

私はまた、事業部ごとに一意のID名を示し、また、そのためのクラス名。ここ

は私jsfiddleためのリンクです：あなたが「jQueryのアコーディオン」について話すときhttps://jsfiddle.net/k3vin023/73phfh66/

Answer 1

はそれを試してみてください：

編集注以下で最後<tr>....</tr>を交換し

Javascriptを：

function showNext($this) { 
$this.next().slideToggle('fast'); 
} 
$(document).ready(function() { 
$('#myTable').DataTable({ 
    "pageLength": 5 
}); 
}); 

HTML：

<table id="myTable"> 
       <thead> 
        <tr> 
         <th>PO#</th> 
         <th>Vendor Name</th> 
         <th>Order Date</th> 
         <th>Items</th> 
         <th>Total Amount</th> 
         <th>Status</th> 


        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td>1</td> 
         <td>Sample1</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_1" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-1" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-1"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
        <tr> 
         <td>2</td> 
         <td>Sample2</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_2" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-2" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-1"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
        <tr> 
         <td>3</td> 
         <td>Sample3</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_3" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-3" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-3"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
        <tr> 
         <td>4</td> 
         <td>Sample4</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_4" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-4" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-4"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
        <tr> 
         <td>5</td> 
         <td>Sample5</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_5" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-5" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-5"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
        <tr> 
         <td>6</td> 
         <td>Sample6</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_6" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-6" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-6"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
        <tr> 
         <td>7</td> 
         <td>Sample7</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_7" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-7" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-7"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
        <tr> 
         <td>8</td> 
         <td>Sample8</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_8" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-8" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-1"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
        <tr> 
         <td>9</td> 
         <td>Sample9</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_9" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-9" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-1"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
        <tr> 
         <td>10</td> 
         <td>Sample10</td> 
         <td>January 1, 1990</td> 
         <td> 
          <div id="accordion_10" class="accordion"> 
           <span>Item +</span> <a class="accordion-toggle accordiontoggle-10" onclick="showNext($(this))">2 more</a> 
           <div class="accordion-content default accordioncontent-10"> 
            <ul> 
             <li> Item 1</li> 
             <li> Item 2</li> 
             <li> Item 3</li> 
            </ul> 
           </div> 
          </div> 
         </td> 
         <td>1.00</td> 
         <td>Open</td> 
        </tr> 
       </tbody> 
      </table> 

jsfiddle：

https://jsfiddle.net/73phfh66/3/

Answer 2

は、私はあなたがjQueryのUIアコーディオンウィジェットを参照していると仮定します。その場合は、正しく設定していません。

私は自分のページhere上のサンプルを改善することはできません。

<div id="accordion"> 
    <h3>First header</h3> 
    <div>First content panel</div> 
    <h3>Second header</h3> 
    <div>Second content panel</div> 
</div> 

注意各アコーディオンヘッダがh3要素である必要があり、コンテンツはすぐにそのヘッダを以下div要素に包まれなければならないこと：これは基本的な構造です。マークアップにはh3要素がありません。

、あなたのテーブルに適切な構造を入れた場合、あなたはそれを動作させるために行うために必要なすべては、あなたの要素のそれぞれにaccordion()メソッドを呼び出すです。詳細はドキュメントを参照してください。最後<tr>で

Answer 3

、何かが<tr>タグが間違っています。それは仕方によって動作します。..

<tr> 
<td>10</td> 
<td>Sample10</td> 
<td>January 1, 1990</td> 
<td> 
    <div id="accordion_10" class="accordion"> 
     <span>Item +</span> <a class="accordion-toggle accordiontoggle-9">2 more</a> 
     <div class="accordion-content default accordioncontent-1"> 
      <ul> 
       <li> Item 1</li> 
       <li> Item 2</li> 
       <li> Item 3</li> 
      </ul> 
     </div> 
    </div> 
</td> 
<td>1.00</td> 
<td>Open</td> 
</tr>