Javascript Fechar Collapsible ao abrir outra.

[Diogou]

OI, como faço para ao clicar em uma div, mostrar um conteúdo , porém, se já tiver uma div ativa, desativa-la?

 

Link no W3S: https://www.w3schools.com/howto/howto_js_collapsible.asp

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}

 

[makotsunami]

//Nodelist com seus divs com a classe cllapsible
const collapsibles = document.querySelectorAll('.collapsible');

//Adicionar evento de click em todas as collapsibles
collapsibles.forEach(collapsible => {
	collapsible.addEventListener('click', ()=> {
      
      	//Codigo para remove a classe active de todos os itens do nodeList
    	collapsibles.forEach(el => {
        	el.classList.remove('active');
        });
      
      	//Adicionar a classe active
      	collapsible.classList.add('active');
    });
});

Da forma que eu fiz você primeiro desativaria todos os itens do seu nodeList, depois, ativaria o item clicado. Quando for fazer laço for em um array ou nodeList use o foreach que fica melhor.

 

Ainda falta mudar o display, igual você fez no seu código.

 

Isso que você precisava?