Estou tentando fazer em uma página, que botões que sejam clicados alterem seu estilo e também passem a exibir uma div ao serem clicados. Só que eles devem ser mutuamente exclusivos, ou seja, quando eu clicar em um, somente a div atrelada ao botão deve ser exibida e somente o botão clicado deve ter seu estilo alterado. O código que tenho utilizado é o seguinte:
//Adiciona eventos a cada botão
//Classe CSS 'side-button' para estado padrão e 'clicked-button' quando clicado
function buttonEventDef(){
var current;
for(var i=0; i<btns.length; i++){
current = i;
btns[i].addEventListener('click', function(){
this.classList.remove('side-button');
this.classList.add('clicked-button');
show[current].style.display = 'initial';
for(var j=0; j<btns.length; j++){
if(j!=current){
btns[j].classList.remove('clicked-button');
btns[j].classList.add('side-button');
show[j].style.display = 'none';
}
}
});
}
}
Mas quando eu aperto um botão ele a mentém o seu estilo , mesmo após eu apertar outro botão. As divs sguem o mesmo comportamnto quanto a visibilidade.
Por acaso há uma forma melhor de fazer isso?