CODEWITHSUNDEEP
jqueryhtml-table
CMH
CMH

Reputation: 738

Expand only one table row using jQuery

I'm using jQuery to expand a row in a table when the row is clicked. How do I modify the code so that when another row is clicked, the currently open row collapses?

Here is the table:

<table class="tb">
 <tbody>
  <tr class="parent"><td>Click here</td></tr>
  <tr><td>Hidden row</td></tr>
  <tr class="parent"><td>Or click here</td></tr>
  <tr><td>Another hidden row</td></tr>
 </tbody>    
</table>

And here is the jQuery:

$('table.tb').each(function() {
 var $table = $(this);
 $table.find('.parent').click(function() {
  $(this).nextUntil('.parent').toggle();
 });
 var $childRows = $table.find('tbody tr').not('.parent').hide();
});

Upvotes: 1

Views: 2271

Answers (1)

tymeJV
tymeJV

Reputation: 104785

Change your function to hide each parent on click

http://jsfiddle.net/ugwfQ/1/

$(".parent").children("td").click(function() {
    $(".parent").next("tr").hide();
    $(this).parent().next("tr").show();
});

Upvotes: 2

Related Questions