jQuery Toggle Texts on Multiple Divs

The following code is what I am using:

jQuery:

jQuery('#slickbox3242').hide();
jQuery('#slickbox3243').hide();
jQuery('#slickbox3244').hide();

jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

jQuery("a.slick-toggle").click(function () {
var id = jQuery(this).attr('id');
jQuery("#slickbox" + id).fadeToggle({
speed:200,easing : "swing"})

jQuery(this).te开发者_运维问答xt(jQuery(this).text() == 'Show Filters' ? 'Hide Filters' : 'Show Filters');
return false;
});

HTML:

<a href="#" id="3242" class="slick-toggle">Show Sales Org Filters</a>
<div id="slickbox3242" style="overflow:hidden;">Some Content</div>

<a href="#" id="3243" class="slick-toggle">Show Retail Filters</a>
<div id="slickbox3243" style="overflow:hidden;"> Some Content</div>

So what I need help with is how to change the text of the links after toggling. For example the initial state of the slickbox3243 is hidden and the text should be "Show Sales Org" and then when it is visible the text should be "Hide Sales Org".

I have seen where span may be used, but I am new to jQuery, and I have yet to see how to set the text specific to the link being changed. I have up to 5 of these links!

---

index and relation attributes are helpful here:

<a href="#" id="3242" rel='slick1' index=0 class="slick-toggle">Show Sales Org Filters</a>
<div id="slickbox3242" class='content' rel='slick1' index=0 style="overflow:hidden;">Some Content</div>

<a href="#" id="3243" rel='slick2' index=0 class="slick-toggle">Show Retail Filters</a>
<div id="slickbox3243" class='content' rel='slick2' index=0 style="overflow:hidden;"> Some Content</div>

jquery

 $("a.slick-toggle").click(function () {
     var rel = $(this).attr('rel');
     //get the text from the <a> and remove the 1st word
     var text = $(this).text().substr(5);
     $(".content[rel='" + rel + "']").fadeToggle({speed:200,easing : "swing"})
     //use the index attribute to determine if the link has been clicked or not
     if( $(this).attr('index') == 0 ){
         $(this).attr('index',1).text("Hide " + text );
     } else {
         $(this).attr('index',0).text("Show " + text );
     }
 });

Now clicking on the link will toggle your content, then check to see what the index is. If the index is currently 0 then it changes it to 1 (indicating it has been clicked) and changes the text to "Hide [the rest of your text]" and the inverse is true too.

On another note - to conserve space and time, only call the .hide() function once like this:

$(".content").hide();

or

$("#slickbo3242,#slickbox3243").hide();

although I prefer the 1st method, this way you don't have to worry about adding more div identifiers into the .hide() function if you add more later on. Just make sure you add class="content" within the new div

---

Try this:

$("#3242").text("Hide Sales Org");

Similar question -> Changing the title of a link in jQuery

---

A solution could be the following:

jQuery

jQuery('#slickbox3242').hide();
jQuery('#slickbox3243').hide();
jQuery('#slickbox3244').hide();

jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);
};

jQuery("a.slick-toggle").click(function () {
 if($(this).children("span").text() == "Show") {
    $(this).children("span").text('Hide');
      } else {
        $(this).children("span").text('Show');
      }
var id = jQuery(this).attr('id');
jQuery("#slickbox" + id).fadeToggle({
speed:200,easing : "swing"})


return false;
});

html

<a href="#" id="3242" class="slick-toggle"><span>Show</span> Sales Org Filters</a>
<div id="slickbox3242" style="overflow:hidden;">Some Content</div>

<a href="#" id="3243" class="slick-toggle"><span>Show</span> Retail Filters</a>
<div id="slickbox3243" style="overflow:hidden;"> Some Content</div>

using if you check if the text within span is Show or Hide and change it.

Demo: http://jsbin.com/iseka3