Show/hide table row with specific class and id generated in loop, using jQuery

Question

I try to learn basics of php and js by making custom pages for my wordpress site. I have list of data generated in a loop from database, formated in table. I would like to see "more details" after clicking on a speciffic row. I was able to make it work with jQuery .toggle script that I've found, but it only works with user-specified row id for now.

I have to pass class and id of the the row to jQuery script. I have found how to pass id or class, but i'm not able to pass both. I'm sure that this is really trivial thing to do, but my attempts were not sucessfull.

I append bits of simplified code:

 jQuery(function($) { $('#1.row').click(function(){ $('#1.row_extend').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1"> <tr id="1" class="row"><td>Content</td></tr> <tr id="1" class="row_extend"><td>Details</td></tr> <tr id="2" class="row"><td>Content</td></tr> <tr id="2" class="row_extend"><td>Details</td></tr> </table> 

As it is writen, it only works for row with id=1 obviously. I would like to make it work on all rows. Somebody who works with it will solve this in fraction of a second, but I am googling it for half a day :) Thank you.

Answer 1

dont add number for id and here you dont need to add id, we can play with class

 $(function(){ $('.row').click(function(){ $(this).next('.row_extend').toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table border="1"> <tr class="row"><td>Content</td></tr> <tr class="row_extend"><td>Details</td></tr> <tr class="row"><td>Content</td></tr> <tr class="row_extend"><td>Details</td></tr> </table>