Tentei ser o mais simples possível, usando o "visibility" no CSS.
CSS:
.lista {
padding: 20px;
list-style-type: none;
border: 4mm ridge rgba(234, 122, 11, 0.992);
visibility: visible;
}HTML: apenas coloquei a classe nos botoes ".botao-mostrar" ".botao-esconder"
JS:
const lista = document.querySelector(".lista");
const botaoMostrar = document.querySelector(".botao-mostrar");
botaoMostrar.addEventListener("click", () => {
lista.style.visibility = "visible";
})
const botaoEsconder = document.querySelector(".botao-esconder")
botaoEsconder.addEventListener("click", () => {
lista.style.visibility = "hidden";
})
