JS: Add an icon to an event to change the background and bring up content

Question

Hello. I’m trying to create an application, the idea is exactly what is found in this Theme http://klbtheme.com/kryptix/ under the title How ICOX Works.

The color of my icon is gray and the background is white. I want it to change to white and purple background. My icon is font type, so about that ok. But in addition, when you click on icon 1, I want the content to appear, and when you click on icon 2. I want you to switch to the content of 2. This is easy using css and applying/removing classes, so far ok, but the problem is in javascript.

The parts of html are:

<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>

and

<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>

I created the code below, where I can be part of what I wish is to change the colors.

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');
    }
  }
}

The content class has None display to not appear, so now none appears. But I want when the first icon is clicked, this class of the first content disappears, making the content visible on the screen, and when you click the second, add the class again and remove the second class.

Someone can help me?

Answer 1

Hello. You can use a class .active to indicate which icon and what content is active. Then simply remove/add this class when there is a click.

You can also use the property data-target to indicate which icon is related to which content, so when there is a click on an icon, you will know exactly which content should be shown. To do this, simply assign the content id to the data-target icon in html. For example:

<div class="icon-visual" id="icon-financeiro" data-target="#financeiro-content"> 
  <i class="icofont-exchange icon-white"></i>
</div>

And in the content div you put the id:

<div class="financeiro conteudo" id="financeiro-content">                            
  <h2>Financeiro</h2>
  <p>Texto para Financeiro.</p>
</div>

By javascript, you can access the value of data-target using object.dataset.target. That way, your javascript code would look like this:

var icons = document.querySelectorAll('.icon-visual');
var contents = document.querySelectorAll('.conteudo');
for (var i = 0; i < icons.length; i++) {
  icons[i].onclick = iconClick; 
}

function iconClick() {     
  var icon = this;
  for (var i = 0; i < icons.length; i++) {
     icons[i].classList.remove('active');
  }
  for (var i = 0; i < contents.length; i++) {
     contents[i].classList.remove('active');
  }

  var idContent = icon.dataset.target;
  var content = document.getElementById(idContent);
  content.classList.add('active');
  icon.classList.add('active');
}

I made an example for you to see, follow the link: https://jsfiddle.net/1br4hvck/43/.
I hope I’ve helped.

Answer 2

var TodosIcones = document.querySelectorAll('.icon-visual');
var content = document.querySelectorAll(".financeiro, .mensalidade");

    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');
                content[i].classList.remove('conteudo');
            } else {
                Icones[i].classList.remove('icone-selecionado');
                content[i].classList.add('conteudo');
            }
        }
    };

I stored the content blocks inside the content variable and then inside the for da Function onTabClick removed the content class from the block referring to the clicked icon, then when clicking another icon it adds the content class again and removes from the content of the clicked icon.