Twitter Bootstrap Use collapse.js nas células da tabela

Eu estou trabalhando em uma página de contas que lista as transactions (créditos e débitos). Eu gostaria que o usuário pudesse clicar em uma linha da tabela e ela se expandisse mostrando mais informações.

Eu estou usando o twitter bootstrap e examinei a documentação e esse é o resultado que eu tenho

Demo1

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

O único problema é que ele exibe as “informações suspensas” no lugar errado, eu gostaria de adicionar uma nova linha, em vez de imprimir na parte superior da tabela

Eu também tentei adicionar em uma nova linha da tabela (que apenas exibe a linha, e nenhuma ação de recolhimento (aplicado apenas na primeira linha)

  

Veja http://jsfiddle.net/ypuEj/

Felicidades e obrigado pela vossa ajuda

Eu não tenho certeza se você já passou por isso, mas eu tive que trabalhar em algo muito semelhante hoje e eu tenho o seu violino trabalhando como você está perguntando, basicamente o que eu fiz foi fazer outra linha de tabela sob ele, e então usei o acordeão ao controle. Eu tentei usar apenas colapso, mas não consegui fazê-lo funcionar e vi um exemplo em algum lugar no SO que usava acordeão.

Aqui está o seu violino atualizado: http://jsfiddle.net/whytheday/2Dj7Y/11/

Desde que eu preciso postar código aqui é o que cada “seção” dobrável deve se parecer ->

 

Expandindo a resposta de Tony, e também respondendo à pergunta de Dhaval Ptl, para obter o verdadeiro efeito do acordeão e permitir que apenas uma linha seja expandida por vez, um manipulador de events para show.bs.collapse pode ser adicionado da seguinte forma:

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

Eu modifiquei o exemplo dele para fazer isso aqui: http://jsfiddle.net/QLfMU/116/

Se você estiver usando o ng-repeat de Angular para preencher o snippet de jquery do hackel de tabela, não funcionará colocando-o no evento de carregamento de documento. Você precisará executar o snippet depois que o ângulo terminar de renderizar a tabela.

Para acionar um evento após a reprodução do ng-repeat, tente esta diretiva:

 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'); }); } } } }); 

Exemplo completo em angular: http://jsfiddle.net/ADukg/6880/

Eu obtive a diretiva daqui: Use AngularJS apenas para fins de roteamento

    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