CODEWITHSUNDEEP
jqueryhtml
probablybest
probablybest

Reputation: 1455

Jquery targeting a parent div not working

I have a button that when clicked I want to fadein another section which is named 'hidden'. I dont think I am targeting it properly working my way up the markup.

Here is my jQuery

$(document).ready(function() {
$('.singleBtn').click(function(){
    $(this).find('.tick').fadeIn(500);
    $(this).parent('.pt-trigger-container').find('.hidden').fadeIn(500);
});
});

I have also created a jsfidde.

Upvotes: 0

Views: 37

Answers (2)

wobbit
wobbit

Reputation: 103

You have one too many closing divs after your buttons. @Felix's changes will work, I've updated a jsfiddle here:

http://jsfiddle.net/VVNSF/9/

$(document).ready(function() {
    $('.singleBtn').click(function(){
        $(this).find('.tick').fadeIn(500);
        $(this).closest('.pt-trigger-container').find('.hidden').fadeIn(500);
    });
});

Upvotes: 0

Felix
Felix

Reputation: 38112

You need to use .parents() not .parent()

$(document).ready(function () {
    $('.singleBtn').click(function () {
        $(this).find('.tick').fadeIn(500);
        $(this).parents('.pt-trigger-container').find('.hidden').fadeIn(500);
    });
});

or you can use .closest() as well:

$(document).ready(function() {
    $('.singleBtn').click(function(){
        $(this).find('.tick').fadeIn(500);
        $(this).closest('.pt-trigger-container').find('.hidden').fadeIn(500);
    });
});

Try this:

$(document).ready(function() {
    $('.singleBtn').click(function(){
        $(this).find('.tick').fadeIn(500);
        $(this).closest('.pt-trigger-container').next().fadeIn(500);
    });
});

Updated Fiddle

Upvotes: 2

Related Questions