Twitter Bootstrap Usa colapso.js en las celdas de la tabla

Estoy trabajando en una página de cuentas que enumera transacciones (créditos y débitos). Me gustaría que el usuario pueda hacer clic en una fila de la tabla y se expande mostrando más información.

Estoy usando Twitter bootstrap y he revisado la documentación y este es el resultado que tengo

Demo1

Ver: http://jsfiddle.net/2Dj7Y/

El único problema es que muestra la “información desplegable” en el lugar equivocado, me gustaría agregar en una nueva fila, en lugar de imprimir en la parte superior de la tabla

También intenté agregar una nueva fila de la tabla (que solo muestra la fila, y ninguna acción de contracción (solo se aplica a la primera fila)

  

Ver http://jsfiddle.net/ypuEj/

Saludos, y gracias por tu ayuda

No estoy seguro de que hayas superado esto todavía, pero hoy tuve que trabajar en algo muy similar y conseguí que tu violín funcionara como lo preguntas, básicamente lo que hice fue hacer otra fila debajo de la mesa, y luego usé el acordeón controlar. Intenté utilizar el colapso pero no pude hacerlo funcionar y vi un ejemplo en alguna parte de SO que usaba el acordeón.

Aquí está su violín actualizado: http://jsfiddle.net/whytheday/2Dj7Y/11/

Ya que necesito publicar el código aquí es lo que debería ser cada “sección” colapsable ->

 

Ampliando la respuesta de Tony, y también respondiendo a la pregunta de Dhaval Ptl, para obtener el verdadero efecto de acordeón y solo permitir que una fila se expanda a la vez, se puede agregar un controlador de eventos para show.bs.collapse como sigue:

 $('.collapse').on('show.bs.collapse', function () { $('.collapse.in').collapse('hide'); }); 

Modifiqué su ejemplo para hacer esto aquí: http://jsfiddle.net/QLfMU/116/

Si está utilizando ng-repeat de Angular para rellenar la tabla, el fragmento jquery de hackel no funcionará colocándolo en el evento de carga de documentos. Tendrá que ejecutar el fragmento después de que angular haya terminado de renderizar la tabla.

Para desencadenar un evento después de que ng-repeat haya procesado, pruebe esta directiva:

 var app = angular.module('myapp', []) .directive('onFinishRender', function ($timeout) { return { restrict: 'A', link: function (scope, element, attr) { if (scope.$last === true) { $timeout(function () { scope.$emit('ngRepeatFinished'); }); } } } }); 

Ejemplo completo en angular: http://jsfiddle.net/ADukg/6880/

Obtuve la directiva desde aquí: use AngularJS solo para propósitos de enrutamiento

    Intereting Posts

    # Date Description Credit Debit Balance
    1 05 May 2013 Credit Account $150.00 $150.00
    1 05 May 2013 Credit Account $150.00 $150.00
    1 05 May 2013 Credit Account $150.00 $150.00
    1 05 May 2013 Credit Account $150.00 $150.00
    Demo1