My goal is to create a webpage that features multiple tables with data. To prevent the page from getting too long, I want users to have the ability to collapse these tables by clicking on the header. I intend to use a + icon to signify expandable content and a - icon to indicate collapsible content. This means I need to switch the class name of the i tag that contains the icon. However, since there may be several tables with identical i tags, I need a solution that can cover this scenario.
Here is an example of the HTML code:
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Registration</td>
<td>ABC 123</td>
<td> </td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead class="heading" id="thead">
<tr id="tr">
<th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
</tr>
</thead>
<tbody class="content">
<tr>
<td>Start time</td>
<td>11:57</td>
<td> </td>
</tr>
</tbody>
</table>
Additionally, here is the JavaScript code for this functionality:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.content').show();
jQuery('.heading').click(function()
{
jQuery(this).next('.content').slideToggle('0');
jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
});
});
</script>
Although the hiding and showing of the tbody elements is working correctly, I'm encountering issues with changing the icon. Any suggestions?