slideToggle function moves all
<p>I have a slideToggle function like this</p>

<pre><code>$(document).ready(function(){
    $(".widget-content-box").slideUp(); // $(".widget-content-box").hide()
    $("[id^=goal]").click(function(){
        $(this).parent().next().slideToggle("slow");
    });
})
</code></pre>

<p>I have goal ids and when you click on any one of them they all drop down, though  the content only shows on the one i have clicked, which is fine, but is there a way to have the slideToggle dropdown for just the one selected and not drop all of the divs with the goal id</p>

<p>EDIT</p>

<p>HTML for this project</p>

<pre><code>  &lt;div class="span4"&gt;
  &lt;div class="widget"&gt;
    &lt;div class="widget-header"&gt;
      &lt;i class="icon-info-sign icon-large"&gt;&lt;/i&gt;
       &lt;h3 id="goal1" class="clickme"&gt;Core&lt;/h3&gt;
    &lt;/div&gt;&lt;!--/widgetheader--&gt;
     &lt;div class="widget-content-box"&gt;
      &lt;p&gt;Hello&lt;/p&gt;


     &lt;/div&gt;&lt;!--/widget content--&gt;
    &lt;/div&gt;&lt;!--widget--&gt;
  &lt;/div&gt;&lt;!--span4--&gt;

  &lt;div class="span4"&gt;
  &lt;div class="widget"&gt;
    &lt;div class="widget-header"&gt;
      &lt;i class="icon-info-sign icon-large"&gt;&lt;/i&gt;
       &lt;h3 id="goal2" class="clickme"&gt;Marathon Runners&lt;/h3&gt;
    &lt;/div&gt;&lt;!--/widgetheader--&gt;
     &lt;div class="widget-content-box"&gt;
      &lt;p&gt;test&lt;/p&gt;


     &lt;/div&gt;&lt;!--/widget content--&gt;
    &lt;/div&gt;&lt;!--widget--&gt;
  &lt;/div&gt;&lt;!--span4--&gt;

  &lt;div class="span4"&gt;
  &lt;div class="widget"&gt;
    &lt;div class="widget-header"&gt;
      &lt;i class="icon-info-sign icon-large"&gt;&lt;/i&gt;
       &lt;h3 id="goal3" class="clickme"&gt;Biceps&lt;/h3&gt;
    &lt;/div&gt;&lt;!--/widgetheader--&gt;
     &lt;div class="widget-content-box"&gt;
      &lt;p&gt;content&lt;/p&gt;


     &lt;/div&gt;&lt;!--/widget content--&gt;
     &lt;/div&gt;&lt;!--widget--&gt;
    &lt;/div&gt;&lt;!--span4--&gt;
    &lt;/div&gt;
   &lt;/div&gt;
</code></pre>

<p>Thank you </p>

<p>any help appreciated</p>

<p>Edit</p>

<p>My page is set out like so </p>

<pre><code>DIV1      DIV2      DIV3
DIV4      DIV5      DIV6
</code></pre>

<p>so when you click div1 for example everything moves down, rather than just div1 and div4.</p>
