En este post te mostraré cómo usar JavaScript para mostrar u ocultar un elemento del DOM. Por ejemplo, ocultar un párrafo, div, botón etcétera; y también mostrarlo.

Vamos a usar puro JavaScript, nada de frameworks. Al final dejaré un ejemplo.

Ocultar elemento

Una vez que tenemos una referencia al elemento del DOM (se puede con getElementById o los querySelector) podemos modificar su estilo con JavaScript y colocarle display en none. Por ejemplo:

See the gist on github.

De este modo será ocultado el elemento que tiene el id parrafo.

Mostrar elemento

Si quieres volver a mostrar el elemento del DOM usando JavaScript, cambia de nuevo su estilo pero ahora colócale un valor (en style.display) distinto a none.

Normalmente el valor debería ser block, pero si tú le has colocado un valor distinto, simplemente usa el mismo al cambiarlo con JavaScript.

Quedaría así:

See the gist on github.

Sobre los botones

En algunos elementos, el display es distinto. Por ejemplo, para los botones es inline. Así que si quieres mostrar un botón sería:

$boton.style.display = "inline";

Y en ocasiones el estilo es simplemente una cadena vacía, así:

$boton.style.display = "";

Ejemplo

Voy a mostrar y ocultar un párrafo (pero recuerda que podría ser un div, button, etcétera) cuando se presionen determinado botón. Comenzamos diseñando el HTML:

See the gist on github.

Después en el script obtenemos una referencia a los elementos y mostramos u ocultamos dependiendo del botón presionado:

See the gist on github.

Si quieres puedes probar el ejemplo en línea.