JSFiddle - React, Tailwind, and code Playground

by Fumunchu

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script>
<div class="accordion" id="accordion2">
    <div class="accordion-group">
        <div class="accordion-heading"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2"
            href="#collapseOne">
        Company Name 
          <div class="pull-right">
          Qty Unpaid Orders
          </div>
      </a>

        </div>
        <div id="collapseOne" class="accordion-body collapse in">
            <div class="accordion-inner">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <td></td>
                            <td>Order#</td>
                            <td>Qty Product Variants</td>
                            <td>Order Value Before VAT</td>
                            <td>VAT</td>
                            <td>Order Value Incuding VAT</td>
                            <td>WHT Value</td>
                            <td>Payment Due</td>
                        </tr>
                    </thead>
                    <tr class="header">
                        <td>+</td>
                        <td>19777</td>
                        <td>3</td>
                        <td>3200</td>
                        <td>400</td>
                        <td>3600</td>
                        <td>(300)</td>
                        <td>3300</td>
                    </tr>
                    <tr class="child">
                        <td>
                            <table>
                                <tr>
                                    <td colspan="7">Expand This To Full Table</td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr class="header">
                        <td>+</td>
                        <td>19778</td>
                       ...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

$(document).ready(function () {

    $("tr.header").click(function () {
        $("tr.child", $(this).parent()).slideToggle("fast");
    });
});