Tengo una tabla de la siguiente manera:
| un encabezado | otro encabezado |
|---|---|
| Primero (algún texto-inicialmente-oculto) clic | fila |
que al "clic" se convierte en
| un encabezado | otro encabezado |
|---|---|
| Primero (algún texto debería estar visible ahora) haga clic en | fila |
al "hacer clic", el texto "algún texto-inicialmente-oculto" no se muestra después de "hacer clic", quiero mostrar y ocultar el texto al "hacer clic". Tengo una mesa de trabajo como se ve aquí: jsfiddle
Código: 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(); });Gracias de antemano.
Si usa el selector incorrecto, debe ser .complete y debe usar siblings en lugar de closest .
$(this).siblings('.complete').show();https://jsfiddle.net/viethien/dbc349gm/6/
Actualicé el código para mostrar/ocultar tu div
if(!$(this).siblings('.complete').is(":visible")){ $(this).siblings('.complete').show(); }else{ $(this).siblings('.complete').hide(); }span.complete es un hermano de i.fa-chevron-down . $.closest solo busca los elementos proporcionados y sus ancestros.
Puede usar $.siblings en su lugar.
$('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>