title: jQuery toggle opens all divs instead of just the next
body: <p>I am using some jQuery to toggle the visibility of some div's. The toggle occurs on click and should only affect one div. The problem is that if there are multiple divs, they are all toggled on/off instead of just the one a user is trying to toggle.  I think I need to use the 'next' function but can't get it working.  Here is my jQuery:</p>
  
  <pre><code>jQuery(function(){
   jQuery(".toggle").click(function(){
    jQuery(".hiddenText").slideToggle("fast");
          jQuery(this).html(function(i,html) {
              if (html.indexOf('More') != -1 ){
                 html = html.replace('More','Less');
              } else {
                 html = html.replace('Less','More');
              }
              return html;
          }).find('img').attr('src',function(i,src){
          return (src.indexOf('plus.gif') != -1)? '/minus.gif' :'/plus.gif';
      });
  });
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;p class="toggleText"&gt;More Info &amp;nbsp;&lt;img src="/plus.gif"&gt;&lt;/p&gt;
  &lt;div class="hiddenText"&gt;
  blah blah
  &lt;/div&gt;
  </code></pre>
  
  <p>Any tips?  Thanks!</p>