JSFiddle - React, Tailwind, and code Playground

by Ian Roberts

HTML

<button>Toggle</button>

<table border="1" cellpadding="1" cellspacing="1" class="accordion" style="width:100%">
	<caption>
	<p style="text-align: left;"><strong>Nutrition Facts</strong></p>
	</caption>
	<tbody>
		<tr>
			<td style="width: 334px;"><span style="color:rgb(0, 0, 0); font-family:arial,sans,sans-serif">Serving Size: 1/5 Pizza (143g)</span></td>
			<td style="width: 132px;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 334px;"><span style="color:rgb(0, 0, 0); font-family:arial,sans,sans-serif">Servings Per Container: 5</span></td>
			<td style="width: 132px;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 334px;">&nbsp;</td>
			<td style="text-align: right; width: 132px;"><span style="color:rgb(0, 0, 0); font-family:arial,sans,sans-serif">%Daily Value *</span></td>
		</tr>
		<tr>
			<td style="width: 334px;"><strong>Total Fat 17g</strong></td>
			<td style="text-align: right; width: 132px;"><span style="color:rgb(0, 0, 0); font-family:arial,sans,sans-serif">22%</span></td>
		</tr>
		<tr>
			<td style="width: 334px;"><span style="color:rgb(0, 0, 0); font-family:arial,sans,sans-serif">Saturated Fat 8g</span></td>
			<td style="text-align: right; width: 132px;"><span style="color:rgb(0, 0, 0); font-family:arial,sans,sans-serif">30%</span></td>
		</tr>
		<tr>
			<td style="width: 334px;"><span style="color:rgb(0, 0, 0); font-family:arial,sans,sans-serif">Trans Fat 0g</span></td>
			<td style="width: 132px;">&nbsp;</td>
		</tr>
		<tr>
			<td style="width: 334px;"><strong>Cholesterol 50mg</strong></td>
			<td style="text-align: right; width: 132px;"><span style="color:rgb(0, 0, 0); font-family:arial,sans,sans-serif">10%</span></td>
		</tr>
		<tr>
			<td style="width: 334px;"><strong>Sodium 780mg</strong></td>
			<td style="text-align: right; width: 132px;"><span style="color:rgb(0, 0, 0); font-family:arial,sans,sans-serif">33%</span></td>
		</tr>
		<tr>
			<td style="width: 334px;"><strong>Total Carbohydrate 29g</strong></td>
			<td style="text-align:...

CSS

.accordion caption {display:inline-block;}
.accordion tbody {
    display:inline-block;
}

JavaScript

$(function() {
    $('.accordion tbody').hide();
    $('.accordion caption').click(function(){
        $(this).next('tbody').slideToggle("slow");
    });
});

$( "button" ).click(function() {
  $( "tbody" ).slideToggle( "slow" );
});