1
resposta

Minha solução

Criei uma classe no CSS:

.esconder {
  display: none;
}

Criei um botão no HTML

<button data-botao="esconder">Esconder Tintas</button>

No JS fiz um if comparando o valor do data attribute, quando o valor do data-botao é diferente de "mostrar" eu altero o textContent do botão para "Mostrar Tintas", altero o valor do data-botao para "mostrar" e adiciono a classe "esconder".

const lista = document.querySelector(".lista");
const botao = document.querySelector("[data-botao]");

botao.addEventListener("click", () =>{
    if(botao.dataset.botao === "mostrar"){
        botao.textContent = "Esconder Tintas";
        botao.dataset.botao = "esconder";
        lista.classList.remove("esconder");
    }else{
        botao.textContent = "Mostrar Tintas";
        botao.dataset.botao = "mostrar";
        lista.classList.add("esconder");
    }
})
1 resposta

Olá Gabriel, tudo bem?

Excelente! Obrigada por compartilhar sua solução, tenho certeza que ajudará outros estudantes também!

Em caso de dúvidas ou dificuldades, estou a disposição!

Abraços e bons estudos! :)