I have a table as follows:
| A header | Another header |
|---|---|
| First (some-text-initially-hidden) click | row |
which on "click" becomes
| A header | Another header |
|---|---|
| First (some-text-should-be visible now) click | row |
on "click" the text "some-text-initially-hidden" is not getting displayed after "click", i want to show and hide the text on "click" I have a working table as seen here:jsfiddle
Code: HTML:
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="font-size: 13px;">
<th> header1</th>
<th> header2 </th>
<tbody>
<tr class="test">
<td>data-always-visible
<span class="complete">some-data-to hide and show</span>
<br>
<i class="fa fa-chevron-down" style="font-size: 9px;">Click for more details of </i>
</td>
<td> some data...</td>
</tr>
</tbody>
</table>
CSS:
.test~ .test2{
display: none;
}
.open .test~ .test2{
display: table-row;
}
.test {
cursor: pointer;
}
.complete{
display:none;
}
JS/JQuery:
$('table').on('click', 'tr.test .fa-chevron-down', function() {
$(this).closest('tbody').toggleClass('open');
$(this).closest('complete').show();
});
Thank you in advance.
You using wrong selector, it should be .complete and should use siblings instead of closest.
$(this).siblings('.complete').show();
https://jsfiddle.net/viethien/dbc349gm/6/
I updated code to show/hide your div
if(!$(this).siblings('.complete').is(":visible")){
$(this).siblings('.complete').show();
}else{
$(this).siblings('.complete').hide();
}
span.complete is a sibling of i.fa-chevron-down. $.closest only searches the supplied elements themselves and their ancestors.
You can use $.siblings instead.
$('table').on('click', 'tr.test .fa-chevron-down', function() {
$(this).closest('tbody').toggleClass('open');
$(this).siblings('.complete').show();
});.test~ .test2{
display: none;
}
.open .test~ .test2{
display: table-row;
}
.test {
cursor: pointer;
}
.complete{
display:none;
}<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="font-size: 13px;">
<th> header1</th>
<th> header2 </th>
<tbody>
<tr class="test">
<td>data-always-visible
<span class="complete">some-data-to hide and show</span>
<br>
<i class="fa fa-chevron-down" style="font-size: 9px;">Click for more details of </i>
</td>
<td> some data...</td>
</tr>
<tr class="test2">
<td>data-always-visible</td>
<td> some data...</td>
</tr>
<tr class="test2">
<td>data-always-visible</td>
<td> some data...</td>
</tr>
</tbody>
</table>