I'm working on my project and it seems like the jQuery Accordion is not showing in second page of data tables. here are my codes:
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>
I also indicated a Unique ID name per Div and also class name for it.
here is the link for my jsfiddle: https://jsfiddle.net/k3vin023/73phfh66/
