Além da funcionalidade de exibir/esconder, criei os botões solicitados via Javascript também:
//crio o botão de Exibir
var button = document.createElement('button');
button.setAttribute('type','button');
button.setAttribute('data-button','show');
button.appendChild(document.createTextNode('Exibir'));
document.body.appendChild(button);
//crio o botão de Esconder
var button = document.createElement('button');
button.setAttribute('type','button');
button.setAttribute('data-button','hidden');
button.appendChild(document.createTextNode('Esconder'));
document.body.appendChild(button);
//Seleciono os botões criados
const botoes = document.querySelectorAll("[data-button]");
//Seleciono a lista
const lista = document.querySelector("ul");
//Crio um evento de click em cada botão criado
botoes.forEach((botao) =>{
botao.addEventListener("click",(evento) => {
showLista(evento.target.dataset.button)
})
});
//função responsável por exibir/esconder os itens da lista
function showLista(show){
const itensLista = lista.querySelectorAll("[cor]");
itensLista.forEach(item => {
if (show === 'show'){
item.removeAttribute('hidden');
}else{
item.setAttribute('hidden', 'true');
}
});
}
Aceito sugestões de refatoração!