The .closest()
method doesn't find siblings or cousins, it starts with the current element (.smry
, in your case) and goes up through the ancestors, stopping when it finds a match (or returning an empty jQuery object if there is no match).
Try this instead:
$('.main-container .smry').click(function () {
$(this).closest(".main-container").find(".summary").slideToggle(100);
});
This navigates up to the closest containing .main-container
element and then uses .find()
to go back down to its associated .summary
element.
Demo: http://jsfiddle.net/4a8JC/
Note that your code would need to be in a document ready handler and/or in a script block that appears after the elements in question.
(Note also that your summary div would need to have some actual content for this to make sense.)