Botões para ocultar e exibir elementos em JavaScript

Nesta seção, aprenderemos a ocultar e exibir elementos da página. Como de costume, vamos começar com algo simples e, gradualmente, aumentar a complexidade.

Vamos supor, para aquecer, que temos um parágrafo e dois botões:

<p id="elem">texto</p>
<input type="submit" id="show" value="exibir">
<input type="submit" id="hide" value="ocultar">

Vamos obter referências para nossos elementos em variáveis:

let elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');

Agora, vamos fazer com que, ao clicar em um botão, nosso parágrafo seja ocultado, e ao clicar no outro - seja exibido. Para isso, vamos adicionar ou remover a classe CSS correspondente do elemento:

.hidden {
	display: none;
}

Vamos resolver nossa tarefa:

hide.addEventListener('click', function() {
	elem.classList.add('hidden');
});

show.addEventListener('click', function() {
	elem.classList.remove('hidden');
});

Modifique meu código para que haja apenas um botão. Que, ao primeiro clique neste botão, o elemento seja exibido, e ao segundo - seja ocultado.