A criar uma tabela de Acordeões com 'Bootstrap'

Tenho uma tabela que é povoada a partir de uma base de dados que tem muitas colunas (cerca de 30). Uma solução que alguém pensou foi criar um acordeão fora da mesa, onde cada linha é clicável e acordeão para baixo com o resto das colunas de informação. Estou a ter dificuldade em arranjar Presilha para fazer isto como deve ser.

<table class="table table-hover">
    <thead>
        <th></th><th></th><th></th>
    </thead>

    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td>Some Stuff</td>
            <td>Some more stuff</td>
            <td>And some more</td>
        </tr>
        <tr>
            <td>
                <div id="accordion" class="collapse">Hidden by default</div>
            </td>
        </tr>
    </tbody>
</table>

Como pode ver no jsfiddle, esta funcionalidade não está a funcionar. Não sei bem o que se passa e os documentos do Bootstrap não entres em muitos detalhes ao entrar em colapso.

Qualquer ajuda seria muito apreciada, obrigado!

Author: jready, 2014-06-10
Source

4 answers

Isto parece já ter sido perguntado antes:

Isto pode ajudar.

Twitter Bootstrap usar colapso.js nas células da tabela [quase pronto]

Actualização:

O teu violino não estava a carregar o jQuery, por isso, tudo funcionou. 
<table class="table table-hover">
<thead>
  <tr>
    <th></th>
    <th></th>
    <th></th>
  </tr>
</thead>

<tbody>
    <tr data-toggle="collapse" data-target="#accordion" class="clickable">
        <td>Some Stuff</td>
        <td>Some more stuff</td>
        <td>And some more</td>
    </tr>
    <tr>
        <td colspan="3">
            <div id="accordion" class="collapse">Hidden by default</div>
        </td>
    </tr>
</tbody>
</table>
Tenta este.: http://jsfiddle.net/Nb7wy/2/

Eu também adicionei colspan='2' à linha de detalhes. Mas é essencialmente o seu violino com jQuery carregado (em frameworks na coluna da esquerda)

 39
Author: josec89, 2017-05-23 12:34:14

Para qualquer pessoa que tenha vindo aqui à procura de como obter o verdadeiro efeito de acordeão e permitir que apenas uma linha seja expandida de cada vez, você pode adicionar um manipulador de eventos para o show.bs. colapse como assim: 

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

Modifiquei Este exemplo para o fazer aqui: http://jsfiddle.net/QLfMU/116/

 26
Author: hackel, 2017-05-23 11:47:01

Na resposta aceite, obtém-se um espaçamento irritante entre as linhas visíveis quando a linha expansível está escondida. Você pode se livrar disso adicionando isso ao css: 

.collapse-row.collapsed + tr {
     display: none;
}

' + ' é o selector de irmãos adjacente , por isso, se quiser que a sua linha expansível seja a próxima linha, isto selecciona o seguinte tr a seguir ao tr chamado filter-row.

Aqui está actualizado fiddle: http://jsfiddle.net/Nb7wy/2372/

 2
Author: Boat, 2017-11-28 09:01:02
Estou a usar a mesa de acordo, mas estava a pensar se alguém me poderia dizer como remover o enchimento/espaço entre a linha colapsada quando ela colapsou. Aqui está a imagem.

enter image description here

E aqui está o código para isso: 

<div class="panel">
<table class="table table-hover">
    <thead>
        <th><img src="/img/gb.svg" height="12" align="top">&nbsp;Engleski jezik </th><th>&nbsp;<i class="fa fa-spinner" aria-hidden="true"></i>&nbsp;&nbsp;Sati</th><th><i class="fa fa-hourglass-start" aria-hidden="true"></i>&nbsp;60 min.</th><th>&nbsp;<i class="fa fa-credit-card" aria-hidden="true"></i>&nbsp;Jednokratno</th>
    </thead>
    
    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td>Engleski jezik A1 (početni)</td>
            <td>30</td>
            <td>60 min.</td>
<td>2200 KN</td>

        </tr>
        <tr>
            <td colspan="4">
                <div id="accordion" class="collapse"><i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;<b>Trajanje:</b> 30 sati<br><i class="fa fa-clock-o" aria-hidden="true"></i>&nbsp;<b>Trajanje sata:</b> 60 minuta<br><i class="fa fa-calendar-check-o" aria-hidden="true"></i>&nbsp;<b>Termini: </b>Po dogovoru<br><i class="fa fa-credit-card" aria-hidden="true"></i>&nbsp;<b>Cijena sata: </b>80 KN<br><i class="fa fa-book" aria-hidden="true"></i>&nbsp;<b>Osnovna literatura: </b>English File: Elementary: Student's Book<br><br>
 -1
Author: Mookey, 2017-07-13 11:20:38