How to add a class to a div when it is active, so it changes color?

Question

I’m making a Bootstrap-based website, where I have a portfolio zone, where thumbnails open a collapsible DIV. I need that when a collapsible DIV is open, the respective thumbnail changes its CSS formatting, in this case color. I tried to add a class to this so-called ". cliente_active" through my Javascript, but since I am not an expert in the latter language, I did not succeed. I’d appreciate it if you could help me.

My prototype:

FIDDLE

Answer 1

I was very close, I made a change and added a line to remove classes that had been added to other elements

Forehead like this:

 $('.panel-heading').on('click', function () {
     var self = this;
     $('.cliente_activo').removeClass('cliente_activo'); // remover a classe em todos os elementos que a tiverem
     $(this).addClass('cliente_activo'); // adicionar a a classe ao elemento que recebeu o clique
     if (!bigMedia) {
         $('.panel-collapse').slideUp();
         $(this).parent().next().slideToggle('collapse');
         $(this).addClass('cliente_activo');
     } else {
         if (conteudo) {
             conteudo.slideToggle(function () {
                 $(this).remove();
                 abrirFechar(self);
                 // retirei daqui
             })
         } else abrirFechar(self);
     }

 });

Example

You could also use the aberto that you already have in the code, example