web-dev-qa-db-fra.com

Créer une table d'accordéon avec Bootstrap

J'ai une table qui est remplie d'une base de données qui a beaucoup de colonnes (environ 30). Une solution à laquelle on pensait était de créer un accordéon sur la table, où chaque ligne est cliquable et accordera vers le bas avec le reste des colonnes d'informations. J'ai de la difficulté à obtenir que Bootstrap le fasse correctement pour moi.

<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>

Comme vous pouvez le voir sur le jsfiddle , cette fonctionnalité ne fonctionne pas. Je ne suis pas vraiment sûr de ce qui ne va pas, et la documentation de Bootstrap ne rentre pas dans les détails lors de la réduction.

Toute aide serait grandement appréciée, merci!

javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
35
jready

Cela semble être déjà demandé auparavant:

Cela pourrait aider:

Twitter Bootstrap Utilisez collapse.js sur les cellules de tableau [Presque terminé]

MISE À JOUR:

Votre violon ne chargeait pas jQuery, donc tout a fonctionné.

<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>

Essayez celui-ci: http://jsfiddle.net/Nb7wy/2/

J'ai également ajouté colspan = '2' à la ligne de détails. Mais il s’agit essentiellement de votre violon avec jQuery chargé (dans les frameworks de la colonne de gauche)

49
josec89

Pour ceux qui sont venus ici chercher comment obtenir le véritable effet d'accordéon et ne permettre que le développement d'une ligne à la fois, vous pouvez ajouter un gestionnaire d'événements pour show.bs.collapse, comme ceci:

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

J'ai modifié this exemple pour le faire ici: http://jsfiddle.net/QLfMU/116/

33
hackel

Dans la réponse acceptée, vous obtenez un espacement gênant entre les lignes visibles lorsque la ligne extensible est masquée. Vous pouvez vous en débarrasser en ajoutant ceci à css:

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

'+' est sélecteur de fratrie adjacent , donc si vous voulez que votre ligne extensible soit la prochaine.

Voici le violon mis à jour: http://jsfiddle.net/Nb7wy/2372/

4
Boat