How to make a jQuery click event only affect an element nested within the same parent element

Question

I'm a jQuery newbie as of this morning, and this is the code I've come up with to show a div that accompanies the anchor that calls it, inside a div with the class 'foo'. It doesn't work :P

$('div.foo').children('a').click(function(event){
    event.preventDefault();
    if ($(this).closest('div').('div').is(':hidden')) {
        $(this).closest('div').('div').show("slow");
    } else {
        $(this).closest('div').('div').hide("slow");
    }
});

HTML:

<div class="foo">
    <a href="#" title="">Click me!</a>
    <div>And this will appear!</div>
</div>

I'd like to be able to have multiple identical foo divs (apart from the nested div's actual content of course), and all I need to do is assign the containing div the 'foo' class in order to cause the containing anchor to show the containing div on click.

Is this kind of thing even possible? Thanks in advance for responses.

Colin · Accepted Answer · 2009-08-31 23:26:19Z

6

Try this

$('div.foo a').click(function(event){
  event.preventDefault();
  $(this).next().toggle('slow');
});

answered Aug 31, 2009 at 23:26

Colin

2,5026 gold badges24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Chris Nielsen · Accepted Answer · 2009-08-31 23:27:55Z

1

Try this instead (assuming 'div.faq' is supposed to be 'div.foo', based on the HTML):

$('div.foo').children('a').click(function(event){
    event.preventDefault();

    var parent = $(this).closest('div'),
    child = $('div', parent);

    if (child.is(':hidden')) {
      child.show("slow");
    } else {
      child.hide("slow");
    }
});

answered Aug 31, 2009 at 23:27

Chris Nielsen

14.8k7 gold badges50 silver badges55 bronze badges

1 Comment

tjbp Over a year ago

Sorry, was indeed meant to be 'div.foo'. Thanks for the response, this also works perfectly - though Colin's code is a little cleaner :)

Collectives™ on Stack Overflow

How to make a jQuery click event only affect an element nested within the same parent element

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related