Charantej Golla Charantej Golla - 1 month ago 5
HTML Question

Find closest row form the triggered element using jquery

I need your help to

toggle
closest
row
form the
triggered
element. Please go through the fiddle.

What i want is on clicking Relative title name the
next closest
tr
with class name
.expandKpi
to be toggled.

I tried with the below script which was worked earlier in another condition.

$(".annualViewtbody tr .title").click(function(){
$(this).closest('tr').toggleClass('row_active');
$(this).closest('tr').next('tr.expandKpi').toggle();
});


Previously there is no
tr
between the parent
tr
and the
expandKpi
tr.



.expandKpi {
display: none;
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered annualView" style="background:#fff">
<thead>
<tr>
<th>Title Name</th>
<th class="text-center">Dummy Heading</th>
<th class="text-center">Dummy Heading</th>
<th class="text-center">JAN</th>
<th class="text-center">FEB</th>
<th class="text-center">MAR</th>
<th class="text-center">APR</th>
<th class="text-center">May</th>
<th class="text-center">JUN</th>
<th class="text-center">JUL</th>
<th class="text-center">AUG</th>
<th class="text-center">SEP</th>
<th class="text-center">Oct</th>
<th class="text-center">Nov</th>
<th class="text-center">Dec</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" class="title">Sample Title</td>
<td rowspan="2" class="text-center">40%<br></td>
<td rowspan="2" class="text-center">3</td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
</tr>
<tr>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
</tr>
<tr class="expandKpi">
<td colspan="8">
<div class="block_content">
Hidden Content
</div>
</td>
</tr>
<tr>
<td rowspan="2" class="title">Sample Title2</td>
<td rowspan="2" class="text-center">40%<br></td>
<td rowspan="2" class="text-center">20</td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
</tr>
<tr>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
</tr>
<tr class="expandKpi">
<td colspan="8">
<div class="block_content">
Hidden Content
</div>
</td>
</tr>
<tr>
<td rowspan="2" class="title">Sample Title3</td>
<td rowspan="2" class="text-center">10%<br></td>
<td rowspan="2" class="text-center">100</td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
</tr>
<tr>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
</tr>
<tr class="expandKpi">
<td colspan="8">
<div class="block_content">
Hidden Content
</div>
</td>
</tr>
<tr>
<td rowspan="2" class="title">Sample Title4 </td>
<td rowspan="2" class="text-center">10%</td>
<td rowspan="2" class="text-center">60</td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
</tr>
<tr>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
<td class="text-center"></td>
</tr>
<tr class="expandKpi">
<td colspan="8">
<div class="block_content">
Hidden Content
</div>
</td>
</tr>
</tbody>
</table>




KAD KAD
Answer

Use nextAll('tr.expandKpi').first(), plus you have missed a space is selector: annualView tbody ... :

$(".annualView tbody tr .title").click(function(){
    $(this).closest('tr').toggleClass('row_active');
    $(this).closest('tr').nextAll('tr.expandKpi').first().toggle();
});
.expandKpi {
    display: none;
}
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table class="table table-bordered annualView" style="background:#fff">
      <thead>
        <tr>
          <th>Title Name</th>
          <th class="text-center">Dummy Heading</th>
          <th class="text-center">Dummy Heading</th>
          <th class="text-center">JAN</th>
          <th class="text-center">FEB</th>
          <th class="text-center">MAR</th>
          <th class="text-center">APR</th>
          <th class="text-center">May</th>
          <th class="text-center">JUN</th>
          <th class="text-center">JUL</th>
          <th class="text-center">AUG</th>
          <th class="text-center">SEP</th>
          <th class="text-center">Oct</th>
          <th class="text-center">Nov</th>
          <th class="text-center">Dec</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td rowspan="2" class="title">Sample Title</td>
          <td rowspan="2" class="text-center">40%<br></td>
          <td rowspan="2" class="text-center">3</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#00c292"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
		<tr>
          <td rowspan="2" class="title">Sample Title2</td>
          <td rowspan="2" class="text-center">40%<br></td>
          <td rowspan="2" class="text-center">20</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
		<tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#fec107"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
        <tr>
          <td rowspan="2" class="title">Sample Title3</td>
          <td rowspan="2" class="text-center">10%<br></td>
          <td rowspan="2" class="text-center">100</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
		<tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#ffa452"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
        <tr>
          <td rowspan="2" class="title">Sample Title4 </td>
          <td rowspan="2" class="text-center">10%</td>
          <td rowspan="2" class="text-center">60</td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
		<tr>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"><i class="fa fa-circle" style="color:#dd1936"></i></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
          <td class="text-center"></td>
        </tr>
        <tr class="expandKpi">
			<td colspan="8">
				<div class="block_content">
					Hidden Content
				</div>
			</td>
		</tr>
      </tbody>
    </table>