JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<table>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
		</tr>
	</thead>
	<tbody>
		<tr class="js-table-toggle">
			<td>Content</td>
			<td>Content</td>
			<td>Content</td>
			<td>Content</td>
		</tr>
		<tr class="hideMe">
			<td colspan="4"><textarea></textarea></td>			
		</tr>
		<tr class="js-table-toggle">
			<td>Content</td>
			<td>Content</td>
			<td>Content</td>
			<td>Content</td>
		</tr>
    <tr class="hideMe">
			<td colspan="4"><textarea></textarea></td>			
		</tr>
	</tbody>
</table>

CSS

.hideMe {
  display: none;
}

table {
 width: 100%; 
}

td {
  padding: 5px;
}

JavaScript

(function() {

	var tableToggle = $('.js-table-toggle');
  
  tableToggle.on('click', function() {
  	$(this).next().toggle();
  });

})();