How to find an element outside its parent with jQuery

Question

I have this markup:

  <div>
    <div>
      <button class="button"></button>
    </div>
    <div class="panel">
    </div>
  </div>

Now i need to find next panel just right for button element and make some action on it. So i do this but something is not right, can anybody help?

var open_bt = $('.button');

open_bt.on('click',function(){
   $(this).parent().parent().next().child('.panel').slideDown(100);
});

Thx for help.

Answer 1

$(this).parent().next('.panel').slideDown(100); should do the trick

Answer 2

You just need to go up one level, and there is no child method:

open_bt.on('click',function(){
   $(this).parent().next('.panel').slideDown(100);
});

Answer 3

You can do this:

open_bt.on('click', function () {
    $(this).closest('div').next('.panel').slideDown(100);
});