JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<table class="table">

<thead>
<th class="">First</th>
<th class="">Last</th>
<th class="">Phone</th>
</thead>

<tbody>

<tr data-toggle="collapse" data-target="#001" class="accordion-toggle">
<td class="">Bill</td>
<td class="">Clinton</td>
<td class="">000-000-0000</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="001">More details about Bill Clinton here.</div> 
</td>
</tr>

<tr data-toggle="collapse" data-target="#002" class="accordion-toggle">
<td class="">Abraham</td>
<td class="">Lincoln</td>
<td class="">111-111-1111</td>
</tr>
<tr>
<td colspan="3" class="hiddentablerow">
<div class="accordian-body collapse" id="002">More details about Abraham Lincoln here.</div> 
</td>
</tr>

</tbody>
</table>

CSS

.hiddentablerow{
	padding: 0px 0px !important;
  
}

JavaScript

$('.accordion-toggle').click(function() {
    if ( $(this).attr('aria-expanded') == "true" ) {
        $(this).children().css('background-color', '#FFF');
    } else {
        $(this).children().css('background-color', '#DDD');
    }
});