Show hide elements on Table cell
Muestra contenido oculto en una celda al hacer clic en un enlace, tipo spoiler.
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<table class='table'>
<tr>
<th>Header 1 </th>
<th>Header 2 </th>
<th>Header 3 </th>
</tr>
<tr class="oculto1">
<td>Contenido 1A</td>
<td>Contenido 2A</td>
<div class="oculto">
Hola soy un contenido oculto 1
</div>
<td>Contenido 3A <a href="#">mostrar oculto +</a>
<div class="oculto">
Hola soy un contenido oculto 1
</div>
</td>
<td> <a href="#">last column</a>
</td>
</tr>
<tr>
<td>Contenido 1B</td>
<td>Contenido 2B</td>
<td>Contenido 3B <a href="#">mostrar oculto +</a>
<div class="oculto">
Hola soy un contenido oculto 2
</div>
</td>
</tr>
<tr>
<td>Contenido 1C</td>
<td>Contenido 2C</td>
<td>Contenido 3C <a href="#">mostrar oculto +</a>
<div class="oculto">
Hola soy un contenido oculto 3
</div>
</td>
</tr>
</table>
JavaScript
$(".oculto").css("display", "none");
$("a").on("click", function(evento){
evento.preventDefault();
div=$(this).parent().closest('td').prev();
mostrarOcultarContenido(div);
});
function mostrarOcultarContenido(div){
div.children().next().slideToggle();
}