Inline tables for bootstrap 3?

Question

I'm not sure I'm using the correct term so please excuse me.

I'm looking for something similar to what datatables have, the little + sign that when you click it, it shows a div undernearth the row with more information regarding the product/property.

Is there something similar for Bootstrap 3?

Expand a panel, collapse options, there are similar things to string together what you are looking for. http://getbootstrap.com/javascript/#collapse — Steven Scott, Apr 04 '14 at 20:39

score 0 · Answer 1 · edited May 23 '17 at 12:22

Look at https://stackoverflow.com/a/16864694/3111930 Tony is showing how to archieve a collapsable region and you only have to customize the <div> in which he put the Demo1 Text. E.g.:

     <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">
<!-- Here the detailtable begins-->
                            <table class="table table-condensed" style="border-collapse:collapse;">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Text</th>
                </tr>
            </thead>
            <tbody>
                <tr data-toggle="collapse" data-target="#demo1" class="accordion-toggle">
                    <td>1</td>
                    <td>Detaildata</td>
                </tr>
                <tr >
                    <td colspan="6" class="hiddenRow">
    <div class="accordian-body collapse" id="demo1"> Demo1 </div> 
    </td>
                </tr>
    </tbody>
    </table>
<!-- Here it ends -->
    </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>

Inline tables for bootstrap 3?

1 Answers1