No CSS criei uma nova classe com o display block, e alterei a classe já existente para display none:
.lista {
padding: 20px;
list-style-type: none;
border: 4mm ridge rgba(234, 122, 11, 0.992);
display: none;
}
.lista-ver{
display: block;
}
Já no js, com o evento do click, adiciono ou removo a classe com display block:
const button = document.querySelector('[data-button]');
const list = document.querySelector('[data-list]');
button.addEventListener('click', ()=>{
list.classList.toggle('lista-ver')
})
