Target individual class function instead of the whole class group
<p>I have a script that shows more info when clicked and when clicked again it hides the info. The problem is that when clicked it shows and hides information of all the div's with the same class name instead of only the one that was clicked. I was looking around and I would think that I need to add "this" somewhere in it so that it only affects the clicked object. Could someone explain what I am doing wrong and how to achieve this effect?</p>

<p>Javascript</p>

<pre><code> &lt;script type="text/javascript"&gt; 
   this$(document).ready(function(){
   $(".toggle").click(function(){
      $(".hiddenDiv").slideToggle("slow");
        });
   });
  &lt;/script&gt;
</code></pre>

<p>HTML</p>

<pre><code>       &lt;span class="toggle" onClick='return false'&gt;
            &lt;h4 class='arrow'&gt;Group Health Insurance&lt;/h4&gt;
        &lt;/span&gt;

        &lt;div class='hiddenDiv'&gt;
            &lt;p&gt;&lt;img src="../images/group.jpg" border="0" alt="Group Insurance" align="left" hspace="5" /&gt;Group health insurance coverage is a policy that is purchased by an employer and is offered to eligible employees of the company blah blah blah&lt;/p&gt;
        &lt;/div&gt;
        &lt;hr /&gt;
        &lt;span class="toggle" onClick='return false'&gt;
            &lt;h4 class='arrow'&gt;Insurance&lt;/h4&gt;
        &lt;/span&gt;

        &lt;div class='hiddenDiv'&gt;
            &lt;p&gt;&lt;img src="../images/group.jpg" border="0" alt="Group Insurance" align="left" hspace="5" /&gt;More info about other types of insurance blah blah blah&lt;/p&gt;
        &lt;/div&gt;
        &lt;hr /&gt;
</code></pre>

<p>Thanks for your help in advance!</p>
