Here is a table I have:
| A header | Another header |
|---|---|
| First (some-text-initially-hidden) click | row |
Upon clicking, it changes to:
| A header | Another header |
|---|---|
| First (some-text-should-be visible now) click | row |
However, the text "some-text-initially-hidden" does not display after the click. I want to toggle its visibility on click.
Check out the functioning table here.
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 for your help.