Hide/Display a div

Question

Good night, you guys.

My problem is to hide/show a div. I’m still studying and training and could not solve this problem.

I have the following html code:

        <div class="celulares">
            <table>
                <tr>
                    <td id="celular">CELULAR</td>
                    <td id="fones">FONES</td>
                </tr>
            </table>
        <div id="celulares">
            <div class="boxy">
                <a href="#"><img src = "imagens/celulares/z-flip.png">
                <h1> Samsung Galaxy Z Flip </h1>
                <h3>R$ 6.731.34</h3>
                <p> ou 12x de 603,17 sem juros </p>
                </a>
            </div>

            <div class="boxy">
                <a href="#"><img src = "imagens/celulares/motorola-moto-g8.png">
                <h1> Motorola Moto G8 </h1>
                <h3>R$ 1.282.47</h3>
                <p> ou 10x de 137,90 sem juros </p>
                </a>
            </div>

            <div class="boxy">
                <a href="#"><img src = "imagens/celulares/s20.png">
                <h1> Samsung Galaxy S20 </h1>
                <h3>R$ 5.199.00</h3>
                <p> ou 12x de 433.25 sem juros </p>
                </a>
            </div>
            <div class="boxy">
                <a href="#"><img src = "imagens/celulares/iPhone-XR-Apple.png">
                <h1> iPhone XR Apple </h1>
                <h3>R$ 3.399.00</h3>
                <p> ou 10x de 399,90 sem juros </p>
                </a>
            </div>

        </div>
        <div  id="foness">

            <div class="boxy">
            <a href="#"><img src = "imagens/fones/Bluetooth-JBL-T500BT.png">
            <h1> Fone Bluetooth JBL<br> T500BT </h1>
            <h3>R$ 223.45</h3>
            <p> ou 3x de 74.48  </p>
            </a>
            </div>
            <div class="boxy">
            <a href="#"><img src = "imagens/fones/JBL-Endurance-Run.png">
            <h1>  JBL-Endurance-Run </h1>
            <h3>R$ 108.00</h3>
            <p> ou 10x de 10,80  </p>
            </a>
            </div>
            <div class="boxy">
            <a href="#"><img src = "imagens/fones/Philips-Preto-Shl5005.png">
            <h1> Philips-Preto-Shl5005</h1>
            <h3>R$ 179,00</h3>
            <p> ou 12x de 14.91 </p>
            </a>
            </div>
            <div class="boxy">
            <a href="#"><img src = "imagens/fones/Xiaomi-Redmi-Airdots-Earbuds.png">
            <h1> Xiaomi-Redmi-Airdots-Earbuds</h1>
            <h3>R$ 3.399.00</h3>
            <p> ou 10x de 399,90 </p>
            </a>
            </div>
        </div>

And my J:

    <script>
        var celulares;
        var foness;

        

        window.onload = function() {
            celulares = document.getElementById("celulares");
            foness = document.getElementById("foness");

            var celular = document.getElementById("celular");
            celular.onclick = mostrarcelulares;

            

            var fones = document.getElementById("fones");
            fones.onclick = mostrarfoness;

            celulares.classList.add("escondido");
            foness.classList.add("escondido");
    
        }

        function mostrarcelulares() {
            celular.classList.remove("escondido");
            foness.classList.add("escondido");

        }

        function mostrarfoness() {
            celulares.classList.add("escondido");

            foness.classList.remove("escondido");
            

        }

    </script>

Both are overwriting. At one point it was working, but when I put this "boxy" stopped completely.

Observing:

The "hidden" is like display None in css

Answer 1

On the call of one is celular.classList and in another celulares.classList, a little confusion in the variables..

function mostrarcelulares() {
    // celular.classList.remove("escondido");
    celulares.classList.remove("escondido");
    foness.classList.add("escondido");
}

You can also use the Event target. received by this, and summarize in a function more Generica since the two do the same, ex:

celular.onclick = alternarVisualizacao;
fones.onclick = alternarVisualizacao;
function alternarVisualizacao(event) {
    if (event.target === celular) {
        celulares.classList.remove("escondido")
        foness.classList.add("escondido")
    } else {
        foness.classList.remove("escondido")
        celulares.classList.add("escondido")
    }
}

Answer 2

From what I’ve seen, you’re adding the hidden class twice. For example: as soon as the page clicks on window.onload you add the "hidden" class both in div #celulares how much in the div #foness. Then, when you click on the cell phone title for example, it removes the cell class, but adds again to the div #foness that it already has. This behavior may be generating a side effect. It would be good for you to check if the class exists in the element before adding or removing it.