CODEWITHSUNDEEP
jqueryclassjquery-selectorsparent-child
MarcL
MarcL

Reputation: 83

jQuery select a single Div that shares class with others

I really hope you can help me as I searched through several other questions but no solution helped me. The problem is: I'm building a portfolio site where clicking on one div opens a bigger div with more info. Those smaller divs share the same class - how am I able to tell jQuery to only add a class to the div with the 'trigger' in it?

My Javascript looks like this: 

$( document ).ready(function() {
$('#moreinfo').addClass('hidden');
$('.portfoliotile p').addClass('hidden');
$('.portfoliotile h1').addClass('hidden');

 $('.trigger').click(function(){
            $('#moreinfo').removeClass('hidden');
            $(this).parent().addClass('dark');
        });

$('#closegall').click(function(){
            $('#moreinfo').addClass('hidden');
            $('.portfoliotile').removeClass('dark');
        });
});

I really hope you can help me, feel free to have a look at THIS FIDDLE

Upvotes: 0

Views: 90

Answers (1)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You want to alter the ancestor relative to this as, inside the handler, this is the element clicked:

You should normally use closest instead of parent as it is more tolerant to DOM/layout changes.

e.g.

    $(this).closest('.portfoliotile').addClass('dark');

JSFiddle: http://jsfiddle.net/TrueBlueAussie/632Fw/164/

As jQuery supports hiding and showing, I would suggest using its methods (hide/show, fadeIn/fadeout, slideDown/slideUp etc).

Upvotes: 1

Related Questions