Bootstrap - Klapptisch - erweitert werden Müssen nur eine Zeile zu einem Zeitpunkt

Erstellte ich eine bootstrap-Klapptisch Beispiel. Hier folgt die für den link als Kommentar zu dieser Frage. Fiddle

Aber hier kann es möglich, erweitern Sie mehr als eine Zeile zu einem Zeitpunkt.

Aber ich brauche nur eine Zeile erweitern können, in einer Zeit, während noch erweitern eine weitere Zeile der vorherigen Zeile erweitert werden, automatisch zusammengebrochen.

Ist es möglich?

Mein Code :

<table class="table table-condensed" style="border-collapse:collapse;">
    <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" 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="accordian-body collapse" id="demo1"> Demo1 </div> </td>
        </tr>
        <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle">
            <td>2</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$11.00</td>
            <td class="text-error"></td>
            <td class="text-success">$161.00</td>
        </tr>
        <tr>
            <td colspan="6" class="hiddenRow"><div id="demo2" class="accordian-body collapse">Demo2</div></td>
        </tr>
        <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
            <td>3</td>
            <td>05 May 2013</td>
            <td>Credit Account</td>
            <td class="text-success">$500.00</td>
            <td class="text-error"></td>
            <td class="text-success">$661.00</td>
        </tr>
        <tr>
            <td colspan="6"  class="hiddenRow"><div id="demo3" class="accordian-body collapse">Demo3</div></td>
        </tr>
    </tbody>
</table>
  • Hier ist der link http://jsfiddle.net/whytheday/2Dj7Y/11/
  • Es ist buchstabiert "Akkordeon", nicht "Akkordeon" [sic].
InformationsquelleAutor Anish Antony | 2014-10-13
Schreibe einen Kommentar