Minha Solução | 06 - Consolidando o seu conhecimento

Olá, segue minha solução:

HTML:

<button id="botao">Aluratintas em estoque:</button>

    <ul class="lista">
        <li cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
        <li cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
        <li cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
        <li cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
        <li cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
        <li cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
    </ul>

Adicionei ao CSS:

.close {
            position: relative;
            left: -9999px;
        }

Código JS:

const lista = document.querySelector(".lista");
const botao = document.querySelector("#botao");

function escondeLista () {
    lista.classList.toggle('close');
    const escondido = lista.classList.contains('close');
};

botao.addEventListener('click', escondeLista);

Abraços.