Mostrar y ocultar elementos con JS es bastante sencillo. Agregar efectos de transición como los que admite jQuery es un poco más difícil.

 Como parte de nuestro curso de JavaScript, veamos cómo escribir métodos simples de mostrar / ocultar. En próximas notas veremos cómo agregar animaciones de transición.

Simple Mostrar y Ocultar #

Los métodos show (), hide () y toggle () de jQuery usan CSS en línea para cambiar la propiedad de visualización de un elemento. Como sin duda sabes, eso es fácil de hacer con la propiedad de estilo.

// Show an element
var show = function (elem) {
elem.style.display = 'block';
};

// Hide an element
var hide = function (elem) {
elem.style.display = 'none';
};

// Toggle element visibility
var toggle = function (elem) {

// If the element is visible, hide it
if (window.getComputedStyle(elem).display === 'block') {
hide(elem);
return;
}

// Otherwise, show it
show(elem);

};

Notarás que estamos usando getComputedStyle (), para verificar si un elemento es visible. También podríamos verificar la propiedad de estilo, pero el elemento podría ocultarse a través de algún otro CSS (una hoja de estilo externa, por ejemplo) además de un estilo en línea.

Usar una clase en lugar de estilos en línea #

Si bien el CSS en línea funciona, Preferimos usar una clase para controlar comportamientos como este. Te da más control y es más rápido para que el navegador lo procese.

El conjunto de métodos classList nos permite agregar, eliminar y alternar clases, por lo que este enfoque no requiere lógica. El navegador hace todo el trabajo pesado por nosotros.

// Show an element
var show = function (elem) {
elem.classList.add('is-visible');
};

// Hide an element
var hide = function (elem) {
elem.classList.remove('is-visible');
};

// Toggle element visibility
var toggle = function (elem) {
elem.classList.toggle('is-visible');
};

También necesitamos agregar algo de CSS para controlar la visibilidad de nuestro contenido.

.toggle-content {
display: none;
}

.toggle-content.is-visible {
display: block;
}

Usa la clase .is-visible para hacerla visible de manera predeterminada. Déjalo apagado para ocultarlo.

<div class="toggle-content is-visible">Visible by default.</div>
<div class="toggle-content">Hidden by default.</div>

 En próximas notas hablaremos más del tema. Por el momento te animamos a que veas nuestro curso de Excel Y el curso de php.