Collapse/expand table with + and - icons

Question

Below is the script that I am using to expand and collapse my table. This works fine but I now need to know to how I can change my text from + to - when the table is expanded and collapsed. I want to avoid using images for these icons. Any advise at all would be great! Thanks :)

<script type="text/javascript">
jQuery(document).ready(function () 
{
   jQuery(".content").hide();
   jQuery(".collapselabel").click(function () 
   {
      Query(this).next(".content").slideToggle(200); 
   });
});
</script>

This is my label and table

<div class="collapselabel">
<label> + Shops </label>
</div>
<div class="content">
    <table>
            <tr>
                <td width="400">
                Shop One
                </td>
                <td width="400">
                Shop Two   
                </td>
                <td width="400">
                Shop Three   
                </td>
            </tr>
    </table>
</div>

Answer 1

A quick way to do this would be

<script type="text/javascript">
jQuery(document).ready(function () 
{
   jQuery(".content").hide();
   jQuery(".collapselabel").click(function () 
   {
      Query(this).next(".content").slideToggle(200); 
      if($(".collapselabel label").html() == " + Shops")
          $(".collapselabel label").html() == " - Shops";
      else
          $(".collapselabel label").html() == " + Shops"; 
   });
});
</script>