Update content in div, on click of another div

Question

I have this FIDDLE

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

$('#moreinfo').addClass('hidden');
$('.portfoliotile .description').addClass('hidden');

$('.trigger').click(function(e){
    e.stopPropagation();
    $('#moreinfo').removeClass('hidden');
    $(this).parent().addClass('active');
    $('#details').html($(this).parent().find('.description').html());

});

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

When you click on a red box image, text from that red box appears in the yellow box. Also when you click on the red box image, an 'active' class is added to the red box, changing its opacity.

However, when you click on a second red box, the first red box still keeps the 'active' class, so now, both red boxes have this 'active' class.

I want to only have one 'active' class present at a time, whichever red box you click on should be the 'active' one.

If you can show me on an updated fiddle, that would be greatly appreciated as I'm learning!

score 0 · Accepted Answer · answered Dec 20 '16 at 18:25

You can just remove the active class from all the .portfoliotile elements when you click on a .trigger with $('.portfoliotile').removeClass('active'):

$('.trigger').click(function(e) {
  e.stopPropagation();
  $('.portfoliotile').removeClass('active')
  $('#moreinfo').removeClass('hidden');
  $(this).parent().addClass('active');
  $('#details').html($(this).parent().find('.description').html());
});

jsFiddle example

Update content in div, on click of another div

1 Answers1

Linked