title: jquery toggle html text
body: <p>I am trying to show a hidden div that is triggered by an a tag click:</p>
  
  <p>Button Code Looks like this:</p>
  
  <pre><code>&lt;a href="#" onclick="return false;"  class="viewMoreProducts"&gt;View Related Products&lt;/a&gt;
  </code></pre>
  
  <p>Here is my jquery for when i click the button:</p>
  
  <pre><code>// Show Hidden Product Boxes on Expand - More Products and More Link
  $(".viewMoreProducts").click(function() {
      $(this).parent().parent().parent().find(".moreProductsBox:first").slideToggle(300, function (){
          if ($(this).parent().find(".moreProductsBox").is(":visible")){ 
              $(this).find(":input").addClass("visibleCounter");
  
          }
          if ($(this).parent().find(".moreProductsBox").is(":hidden")){ 
              $(this).find(":input").removeClass("visibleCounter");
          }
      });
  });
  </code></pre>
  
  <p>I can get the toggle of the hidden div working just fine but i also want to change the text on the a link to change when the div is showing, to then show it has "Hide Related Products" and show a different icon to collapse. Then if i collapse it, it goes back to read View Related Products and has the plus icon.</p>
  
  <p>Any way to just add it to the jquery that i have already?</p>
  
  <p>This sounds pretty straight forward but giving me the run around.</p>
  
  <p>THanks</p>