JSFiddle - React, Tailwind, and code Playground

by Teuta Koraqi

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<table class="table">
    <thead>
     <tr>
        <th>Event Name</th>
        <th>Customer</th>
        <th>Date</th>
        <th>Time</th>
        <th>Location</th>
        <th>Creator</th>
        <th>Rating</th>
        <th>Ch</th>
        </tr>
    </thead>
    <tbody>
        <tr data-toggle="collapse" data-target="#accordion" class="clickable">
            <td>Some Stuff</td>
            <td>Some more stuff</td>
            <td>And some more</td>
            <td>And some more</td>
            <td>And some more</td>
            <td>And some more</td>
            <td>And some more</td>
            <td>And some more</td>
        </tr>
        <tr class="collapsible-item">
            <td colspan="8">
                <div id="accordion" class="collapse">
                   Hidden by default
                </div>
            </td>
        </tr>
         <tr data-toggle="collapse" data-target="#accordion2" class="clickable">
            <td>Some Stuff</td>
            <td>Some more stuff</td>
            <td>And some more</td>
            <td>And some more</td>
            <td>And some more</td>
            <td>And some more</td>
            <td>And some more</td>
            <td>And some more</td>
        </tr>
        <tr class="collapsible-item">
            <td colspan="8">
                <div id="accordion2" class="collapse">
                   Hidden by default
                </div>
            </td>
        </tr>
    </tbody>
</table>