Jquery expand collapse next row of the table on click of span

Question

I am having a table which is having + and - items for expand and collapse. Onclick of this icons row next to that particular row should expand . I am adding collpasible Icon dynamically through jquery. How can I access next rows dynamically on click of these icons.

Ideally on click of that - icon that expanded row should hide and onclick of + it should be shown.. Thanks in advance

 $( document ).ready(function() { $(".table tbody tr.has-history td:first-child").append('<span class="collapse-icon"></span>'); }); 

 .table tbody tr.has-history > td:first-child { position: relative; } .table tbody tr.has-history span.collapse-icon { display: inline-block; width: 20px; height: 20px; color: white; text-align: center; font-weight: bold; position: absolute; left: -20px; background: #f09d18; border-radius: 5px 0 0 5px; cursor: pointer; font-size: 1.5em; line-height: 1em; } .table tbody tr.has-history span.collapse-icon:before { content: "+"; } .table tbody tr.has-history.open span.collapse-icon { background: #eee; color: #000; border: 1px solid #ccc; } .table tbody tr.has-history.open span.collapse-icon:before { content: "-"; } .table{ MARGIN-LEFT:40px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <table class="table"> <thead> <tr> <th>Product</th> <th>Config</th> <th>Version</th> <th>Status</th> </tr> </thead> <tbody> <tr class="has-history open"> <td><a href="#">MSM8992</a></td> <td>Estel</td> <td>2</td> <td>Active</td> </tr> <tr class="expanded"> <td colspan="4"> <table class="table" > <thead> <tr> <th>Product</th> <th>Config</th> <th>Version</th> <th>Status</th> </tr> </thead> <tbody> <tr> <td><a href="#">MSM8994</a></td> <td>Elessar</td> <td>1</td> <td>Active</td> </tr> </tbody> </table> </td> </tr> <tr> <td><a href="#">MSM8994</a></td> <td>Elessar</td> <td>1</td> <td>Active</td> </tr> <tr> <td><a href="#">APQ8084</a></td> <td>Gandalf - PoP Memory</td> <td>1</td> <td>Active</td> </tr> <tr class="has-history"> <td><a href="#">MDM9x40</a></td> <td>Tesla</td> <td>3</td> <td>Active</td> </tr> <tr> <td><a href="#">MDM9x45</a></td> <td>Spark</td> <td>1</td> <td>Active</td> </tr> <tr class="has-history"> <td><a href="#">APQ8084</a></td> <td>Gandalf - External Memory</td> <td>1</td> <td>Active</td> </tr> </tbody> </table> 

Answer 1

Bind click event using event delegation

Then target the current row using $(this).closest("tr")

Then get the next row using .next()

 $(document).on("click", ".collapse-icon", function() {
   $(this).closest("tr").next().slideToggle();
 });

Answer 2

Bind click event on collapse-icon class

Toggle next row and icon on click

$(document).on("click", ".collapse-icon", function() {
$(this).parents(".has-history").next().slideToggle();
$(this).parents(".has-history").toggleClass("open");
});

Refer this JSFiddle https://jsfiddle.net/k6kn972b/