Question

I am trying to put together a page which contains several tables with data. Since the page can become long I want the user to be able to collapse the tables by clicking the header. I plan to use a + icon to indicate that there is more content available and – icon to show that it is collapsible. So I need to switch the class name of the i tag which is the icon. Like I said the page can contain several tables with identical i tags tags so I need something to cover that

Here is example HTML.

<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>&nbsp;</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>&nbsp;</td>
        </tr>
        </tbody>
</table>

and here is the script

<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>

the showing and hiding of the tbody works fine but I cant get the icon to change, any clues?

Answer 1

Try changing

jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus'); 

to

jQuery(this).find('i').toggleClass('icon-plus icon-minus');