Hide closest div on click

Question

Im trying to figure out how to hide my divs on click, I have two foreaches so it will be multiple equal divs created meaning same class names and stuff so I figured using .closest to hide/show the one I click. If the foreach creates 4 divs and I click one of them I want that one to hide/show.

Also, see comments in following code

@foreach ())
{
    <div class="vwHoldLiftInfo"> // Bigger div
    <a class="liftVariTitle">@variants</a><br /> // Click THIS..

        <div class="vwSetRepHolder @cssClass"> // To hide THIS..

            @foreach ())
            {
                <a>@d.sett x @d.rep @d.kg</a><br />
            }

        </div>
    </div>
}

This is the script I tried with but it hides all the divs! Can this be done?

$(function() {
    $(".liftVariTitle").click(function() {
        $(".vwHoldLiftInfo").children('div').hide(); // .closest/.children?            
    });
});

Answer 1

( I only want to hide the div thats closest to the a tag ) you need to use $(this)

    $(function() {
       $(".liftVariTitle").click(function() {
          $(this).closest(".vwHoldLiftInfo").find('.vwRepSetHolder').hide(); // .closest/.children?            
      });
   });