Question

I have a jQuery function that performs slideDown anitmation on a certain element when clicked like this

$('.Minimize').click(function() {
            $('.ContentTD').slideUp('slow', function() {
                //animation complete
            });
        });

the above script is written inside a web user control.

the problem is that if a page has many instances of the control, the slideDown function is executed in all the instances in the page.

I want the function to be executed only in the control I click.

how to do this ?
thanks

Answer 1

You can climb up to the container they’re both in and find the element relatively, like this:

$('.Minimize').click(function() {
   $(this).closest('.container').find('.ContentTD').slideUp('slow');
});

This assumes markup something like this:

<div class="container">
  <button class="Minimize">Minimize</button>
  <div class="ContentTD">Content</div>
</div>

As long as both are inside some container with a class or other attribute you can identify, you can use .closest() and .find() to get the .ContentTD only in that container. Or, if they’re siblings like the simple example above, .siblings('.ContentTD') works, or some other tree traversal method, the point is to use $(this) (the .Minimize you clicked on) and find the element relative to that.