how to open table tr inside tr on click

Question

I have a one table and I want open same tr inside tr when click on plus icon. I don't understand which html element I use for open.

Please help me out. Thanks in advance.

 <div class="procedure-table"> <table class="table" style="border: 2px slide;"> <thead> <tr> <th>Procedure Name</th> <th>Cost</th> <th>Taxes</th> <th>Notes</th> </tr> </thead> <tbody> <tr> <td class="proce-td"> <ul> <li> <p>Lorem Ipsum is simply dummy text of the printing and typesetting ghj industry.<span><a href="">[+]</a></span> </p> </li> </ul> </td> <td class="cost-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td class="taxes-td">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</td> <td> <div class="note-div">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div> <i class="material-icons close-icon2">close</i> <i class="material-icons edit-icon">edit</i> </td> </tr> </tbody> </table> </div> 

Answer 1

You could use the close-icon. It should toggle from open->close->open Use jquery to fire up the event for open (appendChild or insertAfter) and close (removeChild or simply remove).

 jQuery(document).ready(function() { jQuery("#plus").click(function() { $("#main").append('<tr><td>A</td><td>B</td><td>C</td><td>D</td><td></td></tr>'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1" id="main"> <tr> <td>A</td> <td>B</td> <td>C</td> <td>D</td> <td><a href="#" id="plus">[+]</a></td> </tr> </table> 

Answer 2

Do you want like this?

 jQuery(document).ready(function() { jQuery(".arrow_btn").click(function() { var accor_id = jQuery(this).closest('tr').next('tr').attr("id"); var accor_elm = ''; accor_elm = "#"+accor_id; if (jQuery(accor_elm).is(':visible')) { jQuery(accor_elm).hide('300'); } else { jQuery(accor_elm).toggle('slow'); jQuery(".accrdn_class").not(accor_elm).hide('300'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <thead> <tr class=""> <th>Procedure Name</th> <th>Cost</th> <th>Taxes</th> <th>Notes</th> </tr> </thead> <tr class="all_con_area"> <td class="arrow_btn">Tester</td> <td class="arrow_btn">Test</td> <td class="arrow_btn"> Design</td> <td class="arrow_img "><a href="#" class="arrow_btn">[+]</a></td> </tr> <tr id="satisfication_1" class="accrdn_class" style="display: table-row;"> <td colspan="5" class="temonial_cont"><div class="row head_inner_page"> <div class="col-md-4 col-sm-4 col-xs-12"> <table class="table inner_page_table"> <tbody> <tr> <td><p><span>Client Name<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td> <td ><p>tester</p></td> </tr> <tr> <td ><p><span>Company Name<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td> <td ><p>Test</p></td> </tr> <tr> <td ><p><span>Project City<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td> <td ><p></p></td> </tr> <tr> <td ><p><span>Project Name<span style="float:right;">:&nbsp;&nbsp;</span></span></p></td> <td ><p>Test</p></td> </tr> </tbody> </table> </div> </td> </tr> </table>