Question :
I have a table with summaries about a particular client, where the first line is the main content to be displayed, and the rest is a mere complement.
I know I could apply display: none
, but I do not think that should be the best way to do it. I want to hide the rest of <tr>
and display them with toggle
, which is already being done:
$('#toggle-posicao-financeira').click(function() {
$('#table-posicao-financeira').fadeToggle();
});
Answer :
See the example using the :not(first-child)
selector to manipulate only the other lines.
-
CSS :
tr:not(:first-child)
– Manipulate all non-first rows in the table. -
Jquery
tr:not(:first-child)
– Performs the event only on lines other than the first.
$('#mostrar').on('click', function() {
$('table tr:not(:first-child)').toggle();
});
table tr:not(:first-child) {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><aid="mostrar" href="javascript:void(0)">Mostrar detalhes</a>
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Arth</td>
<td>90</td>
</tr>
</table>