Function to toggle dynamically-added elements
<blockquote>
  <p><strong>Possible Duplicate:</strong><br>
  <a href="http://stackoverflow.com/questions/5327441/one-function-to-toggle-multiple-hidden-elements">One function to toggle multiple hidden elements?</a>  </p>
</blockquote>



<p>I saw this working in a jsFiddle but for whatever reason I can't get it to work.  The code is the way it is because I will have 100+ links from which to choose and I didn't want to make 100 different slideToggle functions.  </p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;head&gt;
&lt;script type="text/javascript" src="jquery.js"&gt;

&lt;/script&gt;
&lt;script type="text/javascript"&gt;
$('.county').click(
    function(){
        var thisIs = $(this).index();
        $('.countystats').eq(thisIs).slideToggle(300);
    });
&lt;/script&gt;
&lt;style type="text/css"&gt;
.county{ font:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
.countystats{
    background-color:blue;
    display:none;
}
&lt;/style&gt;
&lt;/head&gt;


&lt;body&gt;



&lt;div&gt;
    &lt;a class="county" href="javascript:;"&gt;one&lt;/a&gt;
    &lt;a class="county" href="javascript:;"&gt;two&lt;/a&gt;
&lt;/div&gt;
&lt;div class="countystats"&gt;stats one&lt;/div&gt;
&lt;div class="countystats"&gt;stats two&lt;/div&gt;
&lt;br /&gt;
&lt;br/&gt;
&lt;/body&gt;&lt;/html&gt;
</code></pre>

<p>working jsFiddle url: <a href="http://jsfiddle.net/davidThomas/ANu83/" rel="nofollow">http://jsfiddle.net/davidThomas/ANu83/</a></p>
