How to toggle only the *next* .class or div (not the rest)

Question

Hello guys,

I was wondering how to toggle a "child" div only, clicking in a button which repeats over the html, like so :

<div class="button">
     <div class="hide toggle">
          Blah1
     </div>
</div>
<div class="button">
     <div class="hide toggle">
          Blah2
     </div>
</div>
<div class="button">
     <div class="hide toggle">
          Blah3
     </div>
</div>

The goal would be to affect only the inmediate child div, and keep hidden the rest.

I don't know if it's possible.

This bit of code was toggling me all of the divs :

<script type="text/javascript">
  $(document).ready(function(){

    $('.button').click(function() {
    $('.toggle').slideToggle();
    }, function () {
        $('.toggle').slideToggle();
    });

  });
</script>

Many thanks for your help.

Answer 1

try

$(this).next('.toggle').slideToggle();

or

$(this).children('.toggle:first').slideToggle();

Answer 2

Inside the click event handler the this keyword refers to the element that was clicked on. Replace your $('.toggle').slideToggle() lines with

$('.toggle',this).slideToggle();

Answer 3

You guys your are dangerous cracks