jQuery Toggle Texts on Multiple Divs
<p>The following code is what I am using:</p>

<p>jQuery:</p>

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

<p>HTML:</p>

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

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

<p>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".</p>

<p>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!</p>
