JSFiddle - React, Tailwind, and code Playground
HTML
<table class="table table-bordered">
<thead>
<tr>
<th>act</th>
<th>Domain</th>
<th>Source Category</th>
<th>Backlinks</th>
<th>Competitor Relevance</th>
<th>Organic Traffic</th>
<th>Alexa Rank</th>
<th>Site Visitors</th>
<th>Top Geo</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr><td style="width:1%; height:10px;">
<label class="spoiler_title">+</label>
<p class="spoiler_block">
Hide text.
</p>
</td>
<td style="width:10%; height:10px;">example.com</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
</tr>
<tr><td style="width:1%; height:10px;">
<label class="spoiler_title">+</label>
<p class="spoiler_block">
Hide text.
</p>
</td>
<td style="width:10%; height:10px;">example.com</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
<td style="width:10%; height:10px;">test</td>
</tr>
</tbody>
</table>
CSS
@import url('http://getbootstrap.com/dist/css/bootstrap.css');
.spoiler_title{
font-size: 16px;
border-bottom: #000000 dashed 1px;
cursor: pointer;
}
.spoiler_block{
display: none;
}
JavaScript
$(document).ready(function(){
$('.spoiler_title').click(function(){
var spoiler = $('.spoiler_block',$(this).parent());
if(spoiler.is(':visible')){
spoiler.slideUp(300);
}else{
spoiler.slideDown(300);
}
});
});