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

Question

Je suis en train de travailler sur un des comptes de la page qui répertorie les opérations (crédits et débits). Je voudrais que l'utilisateur puisse cliquer sur une ligne du tableau et cela permet d'afficher plus d'informations.

Je suis en utilisant twitter bootstrap et ont examiné la documentation et ceci est le résultat j'ai

<table class="table table-striped" id="account-table">
<thead>
    <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Balance</th>
    </tr>
</thead>
<tbody>
    <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" class="">
        <td>1</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$150.00</td>
        <td class="text-error"></td>
        <td class="text-success">$150.00</td>
        <div id="demo1" class="demo out collapse">Demo1</div>
    </tr>

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

Le seul problème est qu'il affiche la "liste déroulante de l'information" au mauvais endroit, je voudrais ajouter une nouvelle ligne, au lieu de l'imprimer en haut de la table

J'ai aussi essayé d'ajouter une nouvelle ligne de la table (qui affiche simplement la ligne, et pas de fermeture de l'action (appliqué uniquement à la première ligne)

 <tr data-toggle="collapse" data-target="#demo1" data-parent="#account-table" >
            <td>1</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$150.00</td>
            <td class="text-error"></td>
            <td class="text-success">$150.00</td>
             <tr id="demo1" class="demo out collapse"> 
                    <td>1</td>
                    <td>05 May 2013</td>
                    <td>Credit Account</td>
                    <td class="text-success">$150.00</td>
                    <td class="text-error"></td>
                    <td class="text-success">$150.00</td>
                </tr>    

        </tr>

Voir http://jsfiddle.net/ypuEj/

À bientôt, et merci pour votre aide

Answer 1

Je ne suis pas sûr que vous avez obtenu passé ce moment, mais j'ai eu à travailler sur quelque chose de très similaire aujourd'hui et j'ai reçu votre violon de travail comme vous le demandez, en gros ce que j'ai fait était de faire une autre ligne de la table au-dessous, et ensuite utilisé l'accordéon de contrôle. J'ai essayé en utilisant seulement de l'effondrement, mais ne pouvait pas obtenir de travail et a vu un exemple quelque part sur de SORTE que l'habitude de l'accordéon.

Voici la mise à jour de votre violon: http://jsfiddle.net/whytheday/2Dj7Y/11/

Depuis que j'ai besoin de poster le code ici est ce que chaque pliable "de la section" devrait ressembler ->

<tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
    <td>1</td>
    <td>05 May 2013</td>
    <td>Credit Account</td>
    <td class="text-success">$150.00</td>
    <td class="text-error"></td>
    <td class="text-success">$150.00</td>
</tr>

<tr>
    <td colspan="6" class="hiddenRow">
        <div class="accordion-body collapse" id="demo1">Demo1</div>
    </td>
</tr>

Answer 2

L'expansion sur de Tony réponse, et également à répondre à Dhaval Ptl est question, pour obtenir l'effet accordéon et de ne permettre qu'une seule ligne à être élargie à un moment, un gestionnaire d'événements pour l'exposition.bs.l'effondrement peut être ajouté comme suit:

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

});

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