Обновление содержимого в DIV, по нажатию другой DIV

Question

Я это 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'); 
}); 

При нажатии на красную коробку изображения, текст из этого красного ящика появляется в желтой коробке. Также, когда вы нажимаете на изображение с красным полем, в красный квадрат добавляется «активный» класс, изменяя его непрозрачность.

Однако, когда вы нажмете на второй красный ящик, первый красный ящик по-прежнему сохраняет «активный» класс, поэтому теперь оба красных ящика имеют этот «активный» класс.

Я хочу иметь только один «активный» класс одновременно, в зависимости от того, какой красной рамкой вы нажмете, должен быть «активный».

Если вы можете показать мне обновленную скрипку, это было бы очень полезно, поскольку я учусь!

Answer 1

Вы можете просто удалить активный класс из всех .portfoliotile элементов при нажатии на .trigger с $('.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