Question

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).text(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!

Answer 1

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