ansaurus

Question

jQuery selectors?

Answer 1

+3 A:

You want to get only the next container, so you'd use $.next():

$(".header").click(function(){
  $(this).next(".container").slideToggle();
});

Online Demo: http://jsbin.com/eyuwi3/edit

Updated

Requested in the comments was to make this "work on the tr elements." If you click anywhere within the table, the table's click event will eventually fire - unless a child is stopping the propagation.

If this code is not working, then your problem is elsewhere. Make sure you don't have elements between your table and your .container element. $.next() only selects immediate siblings, which is what your sample-code suggests you have.

If problems persist, you could try the following:

$(".header").click(function(){
  $(this).nextAll(".container:first").slideToggle();
});

Online Demo: http://jsbin.com/eyuwi3/2/edit

Jonathan Sampson 2010-02-26 16:55:18

That is cool, thanks for the answer, could you also let me know how to apply to the tr element inside of the table with class "header"?

Cesar Lopez 2010-02-26 17:17:44

For some reason, I cant get it to work. :-(.Thanks anyway. :-)

Cesar Lopez 2010-02-26 17:36:03

@CesarLopez: Please see my additions.

Jonathan Sampson 2010-02-26 19:40:03

Answer 2

A:

I think, though I've not checked, that:

$(this).next('div.container');

should work to select the element; though Jonathan's answer is the more complete.

Edited in response to comments made to Jonathan's answer:

That is cool, thanks for the answer, could you also let me know how to apply to the tr element inside of the table with class "header"?

It depends on where the click's being detected, but assuming the click event is taken by the table cell:

$(this).prev('tr#header');

should select the #header table row.

David Thomas 2010-02-26 16:55:52

Answer 3

+2 A:

Your jQuery selector are finding all .container divs in the document in the click handler. Instead, use the fact that, in event handlers, this is set to the current event target:

$(document).ready(function() {
    $(".header").click(function() {
        $(this).next('div.container').slideToggle("slow");
    });
});

Ben Blank 2010-02-26 16:57:07

ansaurus

tags:

views:

answers:

jQuery selectors?

Updated

related questions