如何使用 jquery 展开/折叠表行？

Question

I am trying to expand/collapse the following row if row with class='sector' is clicked

This same code seems to work for many people as per other stackoverflow answers but it is not working for me and I wonder why? I do not know much jquery but this seems to me to be workable but still does not work.

Kindly give a simple solution

 $(document).ready(function() { $("td[colspan=2]").hide(); $("tr.sector").click(function() { $(this).next().toggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-responsive"> <table class="table"> <tr> <td scope="col">Sector</th> <td scope="col">Total Qty</th> </tr> <tr class="sector"> <td>Sector no. 2</td> <td> M : 1, </td> </tr> <tr> <td colspan="2"> <p> <div> <div class="row"> <div class="col-4">Plot no. 5 | NPSC Apartment</div> <div class="col-4">1 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=5">Details</a></div> </div> </div> </p> </td> </tr> <tr class="sector"> <td>Sector no. 3</td> <td> M : 2, MJ : 1, </td> </tr> <tr> <td colspan="2"> <p> <div> <div class="row"> <div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div> <div class="col-4">1 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=1">Details</a></div> </div> <div class="row"> <div class="col-4">Plot no. 8 | Himachali Apartment</div> <div class="col-4">2 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=8">Details</a></div> </div> </div> </p> </td> </tr> </table> </div> </div>

Answer 1

You are hiding the td[colspan=2] inside tr and trying to toggle that same tr without actuality showing the td you have hidden in first place.

So you need to use next to get next tr sibling and find inside td[colspan=2] you have hidden and toggle that.

Please read documentation on Jquery Tree Traversal and next time watch for your HTML tree. Its all well documented and explained on link provided.

 $(document).ready(function() { $("tr > td[colspan=2]").hide(); $("tr.sector").click(function() { $(this).next().find("td[colspan=2]").toggle(); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="table-responsive"> <table class="table"> <tr> <td scope="col">Sector</th> <td scope="col">Total Qty</th> </tr> <tr class="sector"> <td>Sector no. 2</td> <td> M : 1, </td> </tr> <tr> <td colspan="2"> <p> <div> <div class="row"> <div class="col-4">Plot no. 5 | NPSC Apartment</div> <div class="col-4">1 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=5">Details</a></div> </div> </div> </p> </td> </tr> <tr class="sector"> <td>Sector no. 3</td> <td> M : 2, MJ : 1, </td> </tr> <tr> <td colspan="2"> <p> <div> <div class="row"> <div class="col-4">Plot no. 1 | Heritage Tower (Sawan CGHS)</div> <div class="col-4">1 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=1">Details</a></div> </div> <div class="row"> <div class="col-4">Plot no. 8 | Himachali Apartment</div> <div class="col-4">2 Packets</div> <div class="col-4"><a href="/home/mark-deliveries?sector=&amp;plot=8">Details</a></div> </div> </div> </p> </td> </tr> </table> </div> </div>