Close the child of the parent of the parent

Question

Hello i have an HTML Code like this

<div id="top">
  <div class="panel">
    <h1>toppanel</h1>
    <p>Content from toppanel</p>
  </div>
  <div class="panelholder" id="ptop">
    <a class="open" href="#">open</a>
    <a class="close" href="#">close</a>
  </div>
</div>

for more than on time. The only differnce is the id from the first div My jQuery Code looks like this

// Expand Panel
$(".open").click(function(){
    $(#######).slideDown("slow");   
}); 

and my question is what i have to write for $(#######), if I want to slideDown the div with the class panel

Answer 1

$(".open").click(function(){
    $(this).parent('div.panel').slideDown("slow");   
});

This will find the parent of the open button with the panel class and slide it down, that way you don't have to worry about IDs or anything, just the open link being inside a panel.

Answer 2

// Expand Panel
$(".open").click(function(){
    $(this).parent().siblings('.panel').slideDown("slow");
});

You should read the API documentation on traversal.

Answer 3

$(this).closest('top').find('.panel').slideDown("slow");

or

$(this).parent().prev().slideDown("slow");

Answer 4

Edited to a simpler solution!

$(this).parent().siblings(".panel")

Have a look at the docs on traversing.