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:

html<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:

javascriptlet 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:

css.hidden {
  display: none;
}

Resolvamos nuestra tarea:

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

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