Ola. Estou tentando criar uma aplicação, a ideia é exatamente a que se encontra neste theme http://klbtheme.com/kryptix/ com o título de How ICOX Works.
A cor do meu ícone é cinza e o background branco. Quero que ao clicar nele, ele mude para a cor branca e background roxo. O meu ícone é tipo font, então quanto a isso ok. Mas além disso, ao clicar no ícone 1, quero que o conteúdo apareça, e quando clicar no ícone 2. quero que troque pelo conteúdo do 2. Isso é fácil usando css e aplicando/removendo classes, então até ai ok, mas o problema está no javascript.
As partes do html são:
<div class="plan-card-basic cards-flex">
<div class="plan-card-icons">
<div class="icon-visual" id="icon-financeiro">
<i class="icofont-exchange icon-white"></i>
</div>
<div class="icon-visual" id="icon-mensalidade">
<i class="icofont-money-bag icon-white"></i>
</div>
</div>
</div>
e
<div class="plan-card-text">
<div class="financeiro conteudo">
<h2>Financeiro</h2>
<p>Texto para Financeiro.</p>
</div>
<div class="mensalidade conteudo">
<h2>Mensalidade</h2>
<p>Textos para Mensalidade.</p>
</div>
</div>
Criei o código abaixo, onde consigo fazer parte do que desejo que é alterar as cores.
var TodosIcones = document.querySelectorAll('.icon-visual');
for (var i = 0; i < TodosIcones.length; i++) {
TodosIcones[i].onclick = onTabClick;
}
function onTabClick () {
var Icon = this;
var Icones = Icon.parentNode.querySelectorAll('.icon-visual');
for (var i = 0; i < Icones.length; i++) {
if (Icon == Icones[i]) {
Icones[i].classList.add('icone-selecionado');
} else {
Icones[i].classList.remove('icone-selecionado');
}
}
}
A classe conteudo possui display none para não aparecer, então agora nenhuma aparece. Mas quero que ao ser clicado o primeiro icone, esta classe do primeiro conteúdo desapareça, fazendo com que o conteúdo esteja visível na tela, e quando clicar no segundo, adicione a classe de novo e remova a classe do segundo.
Alguém consegue me ajudar?