Question

Im trying to fade out a DIV when clicking a link within the DIV itself. Here is my code:

$(".hideinfo").click(function () {
  var parentLink = $(this).parent().parent();               
  $(parentLink).fadeTo("slow", 0);
});

The reason I’m not specifying the ID directly is because I want to use this to fade out multiple DIVs with different ID’s.

The above code was returning the ID when I setup an alert but not fading the DIV out or anything else I tried to so… any help here would be appreciated. The HTML is:

<div id="First-Block" class="item">                 
    <p>text here</p>
    <p><a href="#" class="hideinfo">Back</a></p>    
</div>

Thank you!

Answer 1

You should use fadeOut("slow") instead.

Try changing your code to:

$(".hideinfo").click(function () {
    var parentLink = $(this).parent().parent();
    $(parentLink).fadeOut("slow");
});

To improve this even further you can shorten your code to:

$(".hideinfo").click(function() {
    $(this).closest(".item").fadeOut("slow");
});

Just to mention as well that by clicking on an anchor it will jump to the top of the page using #. I would take a look at .preventDefault()

You can also check out the API here -> http://api.jquery.com/fadeOut/