title: How to toggle only the *next* .class or div (not the rest)
body: <p>I was wondering how to toggle a "child" div only, clicking in a button which repeats over the html, like so :</p>
  
  <pre><code>&lt;div class="button"&gt;
       &lt;div class="hide toggle"&gt;
            Blah1
       &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="button"&gt;
       &lt;div class="hide toggle"&gt;
            Blah2
       &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="button"&gt;
       &lt;div class="hide toggle"&gt;
            Blah3
       &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The goal would be to affect only the inmediate child div, and keep hidden the rest.</p>
  
  <p>I don't know if it's possible.</p>
  
  <p>This bit of code was toggling me all of the divs :</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
  
      $('.button').click(function() {
      $('.toggle').slideToggle();
      }, function () {
          $('.toggle').slideToggle();
      });
  
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>Many thanks for your help.</p>