Expandable Table Rows in Bootstrap

Question

I have a web page that uses Bootstrap 3. In that page, I have a table that looks like this:

<table class="table">
  <thead>
    <tr>
      <th></th>
      <th>Order Number</th>
      <th>Order Date</th>
      <th>Total Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&gt;</td>
      <td>1001</td>
      <td>9/29/2016</td>
      <td>$126.27</td>
    </tr>

    <tr>
      <td>&gt;</td>
      <td>1002</td>
      <td>9/27/2016</td>
      <td>$92.15</td>
    </tr>

    <tr>
      <td>&gt;</td>
      <td>1003</td>
      <td>9/01/2016</td>
      <td>$23.55</td>
    </tr>
  </tbody>
</table>

You can see what this table looks like here. When a user clicks the >, I want to expand the row. At that point, more rows should appear to show each orders details. For example, if I expand the middle row, I should see the following:

+-----------------------------------------------------------------+
    Order Number       Order Date                    Total Price
+-----------------------------------------------------------------+
    1001               09/29/2016                    $126.27
+-----------------------------------------------------------------+
    1002               09/27/2016                    $92.15
+-----------------------------------------------------------------+
        Shirt                                        $21.87
+-----------------------------------------------------------------+
        Shoes                                        $70.28
+-----------------------------------------------------------------+                  1003               09/01/2016                    $23.55

+-----------------------------------------------------------------+

The key thing in this table is that when I expand an order, I'm trying to show the items in the order. Each item needs to be in its own row. That has caused me some challenges. I tried using the collapse component. However, that only works if I want to show/hide a div. Plus, it throw the styling of my table off.

How do I show / hide child rows in a table, and still keep the bootstrap style?

Answer 1

The collapse component should work for you, just make sure you override it's normal display:block with display:table-row like this..

tr.collapse.in {
  display:table-row;
}

Demo: http://www.bootply.com/NKtIQVbETH