<script src="https://code.jquery.com/jquery-1.3.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();
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.