Mostrar y ocultar filas de una tabla

[laureano59]

Hola a todos,
Espero puedan darme una mano con este tema, pues he buscado en los post pero no encuentro exactamente lo que necesito:

Tengo una tabla donde las filas se llenan con un JSON que viene de una consulta sql, y cada fila tiene una columna detalle que al hacer click despliega una fila oculta con el detalle de la fila en cuestión.
El problema surge de la siguiente manera.
La tabla se carga con sus respectivas filas, hasta ahí todo perfecto
El problema es que no sé cómo hacer para que se muestra la fila oculta, si la fila oculta la tengo en el código html FUNCIONA pero como viene de una consulta sql la debo tener en jquery y es ahí dónde no se como mostrar la fila oculta.

Este es el codigo donde está la parte de la tabla con jquery:

Código Javascript:

for(var i in perfil.data){
var htmlTags = '<tr>' +
 '<td class="center">' +
   '<div class="action-buttons">' +
 
//Esta es la columna detalle donde llamo la clase show-details-btn para mostrar la fila oculta que está mas abajo
 
     '<a href="#" class="green bigger-140 show-details-btn" title="Show Details">' +
     '<i class="ace-icon fa fa-angle-double-down"></i>' +
       '<span class="sr-only">Details</span>' +
     '</a>' +
  '</div>' +
 '</td>' +
'<td>' +
 perfil.data[i].nombre_mie +
'</td>'+
'<td>'+ perfil.data[i].ministerio +'</td>' +
'<td class="hidden-480">' + perfil.data[i].ciudad + '</td>' +
'<td class="hidden-480">' +
'<span class="label label-sm label-success">' + perfil.data[i].tipo_est +'</span>' +
'</td>' +
'</tr>'+
 
//Aquí inicia el detalle y se oculta con class="detail-row"
//Si llego a poner esta fila en el html me funciona, solo que necesito hacerlo como les expliqué al inicio
//Pido disculpas por si el código no está identado pues no se porque me lo pegó así...                      
                            
'<tr class="detail-row">'+
'<td colspan="8">' +
'<div class="table-detail">' +
'<div class="text-right">' +
'<button type="button" id="buscar" class="btn btn-default btn-round btn-white">' +
'<i class="ace-icon fa fa-floppy-o bigger-160 red"></i>' +
'Guardar Cambios' +
'</button>' +
'</div>' +
'<div class="space-4"></div>' +
'<div class="row">' +
'<div class="col-xs-12 col-sm-2">' +
'<div class="text-center">' +
'<img height="150" class="thumbnail inline no-margin-bottom" alt="Avatar" src="styles/assets/images/avatars/profile-pic.jpg" />' +
'<br />' +
'<div class="width-100 label label-info label-xlg arrowed-in arrowed-in-right">' +
'<div class="inline position-relative">' +
'<a class="user-title-label" href="#">' +
  '<i class="ace-icon fa fa-circle light-green"></i>' +
'&nbsp;' +
'<span class="white">94535626</span>' +
'</a>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="col-xs-12 col-sm-5">' +
'<div class="space visible-xs"></div>' +
'<div class="profile-user-info profile-user-info-striped">' +
'<div class="profile-info-row">' +
'<div class="profile-info-name"> Nombre </div>' +
'<span><input type="text" id="nombre" required="" name="nombre" placeholder="Nombre" class="col-xs-10 col-sm-12" /></span>' +
'</div>' +
'<div class="profile-info-row">' +
'<div class="profile-info-name"> Apellido </div>' +
'<span><input type="text" id="apellido" required="" name="apellido" placeholder="Apellido" class="col-xs-10 col-sm-12" /></span>' +
'</div>' +
'<div class="profile-info-row">' +
'<div class="profile-info-name"> Fecha Nac </div>' +
'<span><input class="date-picker col-xs-10 col-sm-12" id="id-date-picker-1" placeholder="Elije una Fecha" required="" type="text" data-date-format="yyyy-mm-dd" /></span>' +
'</div>' +
'<div class="profile-info-row">' +
'<div class="profile-info-name"> Sexo </div>' +
'<span>' +
 '<select class="form-control" id="sexo" name="sexo" required="">' +
'<option value=""></option>' +
'<option value="Masculino">Masculino</option>' +
'<option value="Femenino">Femenino</option>' +
'</select>' +
'</span>' +
'</div>' +
'<div class="profile-info-row">' +
'<div class="profile-info-name"> Móvil </div>' +
'<span><input type="text" id="movil" name="movil" placeholder="Móvil" class="col-xs-10 col-sm-12" /></span>' +
'</div>' +
'</div>'+
'</div>' +
'<div class="col-xs-12 col-sm-5">' +
'<div class="space visible-xs"></div>' +
'<div class="profile-user-info profile-user-info-striped">' +
'<div class="profile-info-row">' +
'<div class="profile-info-name"> E-mail </div>' +
'<span><input type="text" id="email" name="email" placeholder="E-Mail" class="col-xs-10 col-sm-12" /></span>' +
'</div>' +
'<div class="profile-info-row">' +
'<div class="profile-info-name"> Talla </div>' +
'<span><select class="form-control" id="talla" name="talla">' +
 '<option value=""></option>' +
   '<option value="2XS">2XS</option>' +
    '<option value="XS">XS</option>' +
    '<option value="S">S</option>' +
    '<option value="M">M</option>' +
    '<option value="L">L</option>' +
    '<option value="XL">XL</option>' +
    '<option value="2XL">2XL</option>' +
    '<option value="3XL">3XL</option>' +
    '<option value="4XL">4XL</option>' +
   '</select></span>' +
'</div>' +
'<div class="profile-info-row">' +
 '<div class="profile-info-name"> Ministerio </div>' +
'<div class="profile-info-value">' +
'<span>Bio</span>' +
'</div>' +
                                                            '</div>' +
                                                            '<div class="profile-info-row">' +
                                                                '<div class="profile-info-name"> Sede </div>' +
                                                                '<div class="profile-info-value">' +
                                                                    '<i class="fa fa-map-marker light-orange bigger-110"></i>' +
                                                                    '<span>Netherlands</span>' +
                                                                '</div>' +
                                                            '</div>' +
                                                            '<div class="profile-info-row">' +
                                                                '<div class="profile-info-name"> ¿Es Lider? </div>' +
                                                                '<span><select class="form-control" id="tipo_miembro" name="tipo_miembro" required="">' +
                                                                 '<option value=""></option>' +
                                                                 '<option value="1">Si</option>' +
                                                                 '<option value="2">No</option>' +
                                                                 '</select></span>' +
                                                                    '</div>' +
                                                                '</div>' +
                                                            '</div>' +
'</div>' +
'</div>' +
'</div>' +
'</td>' +
'</tr>';
 $('#simple-table tbody').append(htmlTags);
}
 

Y este es el codigo de la función para mostrar la fila oculta:

Código Javascript:

jQuery(function($) {
 
        $('.show-details-btn').on('click', function(e) {
            e.preventDefault();
            $(this).closest('tr').next().toggleClass('open');
            $(this).find(ace.vars['.icon']).toggleClass('fa-angle-double-down').toggleClass('fa-angle-double-up');
        });
 
    });
 

Gracias por su valiosa ayuda.