jquery Toggle html Text

Question

Ich versuche, eine versteckte div zu zeigen, die von einem Tag Klick ausgelöst wird:

Knopf-Code wie folgt aussieht:

<a href="#" onclick="return false;" class="viewMoreProducts">View Related Products</a> 

Hier ist meine Jquery für, wenn ich das Klicken Button:

// 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"); 
     } 
    }); 
}); 

ich den Knebel des versteckten div ganz gut arbeiten bekommen, aber ich möchte auch den Text auf der einen Link ändern, wenn das div, es zu zeigen, zeigt sich ändern, dann hat „Verwandte Produkte ausblenden "und Anzeige anzeigen ifferent-Symbol zum Zusammenbruch. Dann, wenn ich es zusammenbringe, geht es zurück zum Lesen von verwandten Produkten und hat das Plus-Symbol.

Irgendeine Möglichkeit, es nur zu der Jquery hinzuzufügen, die ich bereits habe?

Das klingt ziemlich geradlinig, aber gibt mir den Lauf rum.

THanks

Answer 1

Sie so etwas wie dies versuchen könnte (die mehrere Eltern unter der Annahme() s nicht weiter vereinfacht werden kann):

$(".viewMoreProducts").click(function(){ 
    var that = this; // reference to the <a> 
    $(this).parent().parent().parent() 
     .find(".moreProductsBox:first").slideToggle(300, function(){ 
     var isvisible = $(this).parent().find(".moreProductsBox").is(":visible"); 
     $(this).find(":input").toggleClass('visibleCounter', isvisible); 
     $(that).html((isvisible ? 'Hide It' : 'Show It')); 
     }); 
}); 

Answer 2

<a href="#" class="viewMoreProducts">View Related Products</a> 

jQuery:

$(".viewMoreProducts").click(function() { 
    var $button = $(this); 
    $(this).parent().parent().parent().find(".moreProductsBox:first").slideToggle(300, function() { 
     var $input = $(this).find(":input"); 
     if ($(this).is(":visible")) { 
      $input.addClass("visibleCounter"); 
      $button.text('Hide Related Products'); 
     } else { 
      $input.removeClass("visibleCounter"); 
      $button.text('View Related Products'); 
     } 
    }); 
    return false; // allows you to remove that onclick attribute 
}); 

Answer 3

Sie können dies ein bisschen altmodisch finden:

var x = this.innerHTML; 
this.innerHTML = x.replace("show","z").replace("hide","show").replace("z","hide");