title: Jquery Change Icon on Toggle for table row
body: <p>Right now I have the following Jquery, which when clicking on a table row it closes the rows under it.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function () {
      $("tr.spaceUnder").hide();
      $('tr:not(.spaceUnder)').click(function () {
          $(this).nextUntil('tr:not(.spaceUnder)').toggle();
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>Now what I want is when I click on the row which toggles the rows under it, is to show an open / close icon or +/- whatever.</p>
  
  <p>This is what the row looks like which has the toggle on it.</p>
  
  <pre><code>&lt;tr class="countryRow categoryHeader"&gt;
          &lt;td colspan="3" class=""&gt;
              &lt;span class="listItemHeader"&gt;
                  &lt;%#((Item)Container.DataItem)["Name"]%&gt;
              &lt;/span&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;a href="#" style="float: right;"&gt;&lt;img width="20"  src="/Images/sBackTopPic.png"&gt;&lt;/a&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  </code></pre>
  
  <p>So on the toggle I would like to change css class on the a href in the second td in the row, so on initial load show closed icon since, then on click the open icon..then when click again the closed icon. So I was wondering how I could add the css class on my a href with my current toggle logic.</p>