Botones para ocultar y mostrar elementos en JavaScript

En esta sección aprenderemos a ocultar y mostrar elementos de la página. Como siempre, empezaremos con algo simple y gradualmente lo haremos más complejo.

Para calentar, supongamos que tenemos un párrafo y dos botones:

<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

Obtengamos referencias a nuestros elementos en variables:

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

Ahora hagamos que al hacer clic en un botón nuestro párrafo se oculte, y en el otro - se muestre. Para esto asignaremos o quitaremos la clase CSS correspondiente al elemento:

.hidden {
	display: none;
}

Resolvamos nuestra tarea:

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

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

Modifique mi código para que solo haya un botón. Que al primer clic en este botón el elemento se muestre, y al segundo - se oculte.