Jquery select child of parent binding

Question

I want to select and toggle () a child of a parent of an anchor parent.

This is an example of what I'm trying to do. This does not work:)

<div>

    <div>
        <a href="#" onclick="$(this + ':parent:parent .inner').toggle();">hide</a>
    </div>

    <div class="inner">
        To be toggled.
    </div>

</div>

Answer 1

You can use .parent(), then .siblings(), for example:

$(this).parent().siblings('.inner').toggle();

But if you can make it unobtrusive, which would be a little more convenient, for example, give your link a class, for example:

 <a href="#" class="toggler">hide</a>

Then you can bind this class (all its instances), for example:

$(function() {
  $(".toggler").click(function() {
    $(this).parent().siblings('.inner').toggle();
  });
});

Answer 2

$(function(){
    $('a').click(function(){
        $(this).parent().parent().find('.inner').toggle();

    }

}