JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<br>
<table cellpadding="0" cellspacing="0" class="tctAdmin">
    <tr>
        <th>Register Date</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email Address</th>
        <th>Email Sent</th>
        <th></th>
    </tr>
    <tr>
        <td>1/2/2015</td>
        <td>Fred</td>
        <td>Derf</td>
        <td>[email protected]</td>
        <td>1/2/2015</td>
        <td><a href="#" class="editRecord">More</a></td>
    </tr>
    <tr id="tcm0" class="record">
        <td colspan="8">test 0</td>
    </tr>
    <tr>
        <td>1/3/2015</td>
        <td>Test</td>
        <td>User</td>
        <td>[email protected]</td>
        <td>1/3/2015</td>
        <td><a href="#" class="editRecord">More</a></td>
    </tr>
    <tr id="tcm1" class="record">
        <td colspan="8">test 1</td>
    </tr>
    <tr>
        <td>1/7/2015</td>
        <td>Fearless</td>
        <td>Freep</td>
        <td>[email protected]</td>
        <td>1/7/2015</td>
        <td><a href="#" class="editRecord">More</a></td>
    </tr>
    <tr id="tcm2" class="record">
        <td colspan="8">test 2</td>
    </tr>
    <tr>
        <td>1/12/2015</td>
        <td>Barney</td>
        <td>Rubble</td>
        <td>[email protected]</td>
        <td>1/12/2015</td>
        <td><a href="#" class="editRecord">More</a></td>
    </tr>
    <tr id="tcm3" class="record">
        <td colspan="8">test 3</td>
    </tr>

CSS

table.tctAdmin, .tctAdmin tr th {font-family:arial;font-size:9pt;border:1px solid #aaa;border-collapse:collapse;}
.tctAdmin tr td {border:1px solid #ccc;border-collapse:collapse;}
.tctAdmin tr th {font-size:1.1em;background-color:#ccc;}
.tctAdmin tr td {padding:2px 5px 0 5px;}
.tctAdmin tr td:nth-child(1) {width:17%;}
.tctAdmin tr td:nth-child(2) {width:13%;}
.tctAdmin tr td:nth-child(3) {width:13%;}
.tctAdmin tr td:nth-child(4) {width:22%;}
.tctAdmin tr td:nth-child(5) {width:16%;}
.tctAdmin tr td:nth-child(6) {width:5%;}

JavaScript

$('.record').hide();
$('a.editRecord').click(function(e) {
    e.preventDefault();
    $('.record').hide();  
    $(this).closest('tr').nextUntil(":not(.record)").toggle('slow');                
});