<script src="https://code.jquery.com/jquery-1.4.2.js"></script>
<body>

	<table>
		<tr class="btn">
			<th colspan="3">検索サイト</th>
		</tr>
		<tr class="hide">
			<td>Google</td><td>Yahoo</td><td>Bing</td>
		</tr>
		<tr class="btn">
			<th colspan="3">ネット通販</th>
		</tr>
		<tr class="hide">
			<td>Amazon</td><td>楽天</td><td>Yahoo</td>
		</tr>
	</table>

</body>
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
table {
	border-collapse:collapse;
	border-spacing: 0;
	width: 100%;
}
th{
    border: 1px solid #333;
    cursor: pointer;
}
td{
    border: 1px solid #333;
    width: 33.333%;
    padding: 3px;
    text-align: center;
}
.hide{
	display: none;
}
$(function () { 
		$('.btn').click(function() { 
			$(this).next().slideToggle();
		}); 
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.