Javascript 根据单击更改显示的锚定？

当用户单击“显示产品”时，将显示链接列表，当用户再次单击“显示产品”时，链接列表将消失。这很好，但是当显示列表时，我想将文本更改为“隐藏产品”

到目前为止，我可以让一切工作（感谢），但我还没有能够改变文本为“隐藏产品”，请告知我在哪里可以找到如何做到这一点

谢谢

  <li id="showProductCategories" class="showProductCategories">
           <a>Show Product</a>
        </li>

        //<li id="hideProductCategories" class="showProductCategories">
           //<a>Hide Product</a>
        //</li>

     <div id="productLink">
          <ul class="categorymenu">
             @foreach (ProductCategoryRecord pc in Model.ProductCategories)
             {
                 <li class="active"><a href="@Url.Action("Category", "Store", new { id = pc.Name })">@pc.Name</a></li>
             }

             @if (Model.ProductCategories.Count() <= 0)
             {
                  <p>There are no products in this category</p>
             }
          </ul>
     </div>

<script type="text/javascript" language="javascript">
         $('#showProductCategories').click(function () {
             $('#productLink').toggle('slow', function () {

                 //something in here about hideProductCategories??

             });
         });
     </Script>

}
@如果（Model.ProductCategories.Count（）简单：

$('#showProductCategories').click(function () { 
    var anchor = $(this).find("a");   
    $('#productLink').toggle('slow', function () {
        anchor.text($(this).is(":visible") ? "Hide Product" : "Show Product");
    });        
});

$('#showProductCategories').click(function () {    
    $('#productLink').toggle('slow');
    var anchor = $(this).find("a");
    anchor.text(anchor.text() == "Show Product" ? "Hide Product" : "Show Product");
});