Mostrar contenido oculto al pulsar un botón en Divi

por | 8 Ene, 2018 | css, JavaScript

destacada-mostrar-contenido-oculto

La idea

A veces necesitamos habilitar algunas zonas en nuestra web o la de nuestro cliente donde mostrar más contenido. Sin embargo, no soy partidario de cargar demasiado una página con contenidos que no siempre son necesarios. Mostrar contenido oculto al pulsar un botón en Divi puede ser una buena solución.

Complementar determinados contenidos con información adicional no tiene por qué ser un inconveniente cuando queremos mantener una web limpia y clara. Y para ello vamos a utilizar hoy un poquito de código que nos va a permitir revelar contenido solo si el usuario lo considera necesario. Con la ayuda de un poco de JavaScript que pondremos en un módulo tipo código y algunos retoques lo conseguiremos. Haremos que al pulsar un botón se muestre una sección, fila o módulo. Si pulsamos otra vez, se ocultará de nuevo.

Nuestro ejemplo

A continuación puedes ver cómo va quedar nuestra práctica. Vamos a utilizar un módulo tipo llamada a la accion para desencadenar la instruccion cuando pulsemos sobre el botón del módulo. La sección que está oculta y que se va a mostrar contiene una galería.

Por supuesto podría usar cualquier otro tipo tanto para ejecutar el script como para desplegar el contenido oculto. Por ejemplo, en lugar de un módulo CTA (llamada a la accion) podíamos haber usado un botón, una imagen, o un módulo anuncio. Y para la sección/fila/módulo que se muestra, podríamos haber elegido cualquier combinación de módulos o fila o un módulo solo. Aquí tienes la muestra. Pulsa sobre el botón amarillo para mostrar la sección oculta:

<script type="text/javascript"><!-- [et_pb_line_break_holder] --> jQuery(document).ready(function() {<!-- [et_pb_line_break_holder] -->// ocultar el contenido<!-- [et_pb_line_break_holder] -->jQuery('#mostrar').hide();<!-- [et_pb_line_break_holder] -->jQuery('.botoncillo').click(function(e){<!-- [et_pb_line_break_holder] -->e.preventDefault();jQuery("#mostrar").slideToggle();<!-- [et_pb_line_break_holder] -->jQuery('.botoncillo').toggleClass('opened closed');<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] -->});<!-- [et_pb_line_break_holder] --></script>

Mostrar contenido oculto al pulsar un botón en Divi

Cuando pulses en el botón inferior, se mostrará contenido oculto, en este caso una galería de fotos. Cuando pulses de nuevo, se ocultará.

mostrar/ocultar contenido

Cómo lo hacemos

Para este tutorial necesitaremos, como ya hemos comentado antes, dos secciones. La primera sección contendrá una primera fila con el módulo código donde vamos a pegar el JavaScript y otra fila que contiene el módulo llamado a la acción, y desde el botón de este módulo, activaremos el JavaScript que revelerá la sección inferior. Esta segunda sección contiene un módulo galería. Como ya te he comentado, podría contener lo que quisieras. Aquí tienes la estructura. Estructura-tutorial-mostrar-contenido-oculto

La primera sección. Módulo CTA

Esta primera sección va a contener el módulo llamada a la acción. Así que creamos una nueva entrada o página y activamos el constructor Divi. Pulsamos en insertar columna > añadir módulo y elegimos un módulo tipo llamada a la acción.

insertar-modulo-llamada-accionA continuación, en ajustes del módulo, contenido, ponemos título, texto y añadimos el texto que queramos que contenga el botón. En url ponemos # para que se active y sea visible el botón del módulo. Y en la pestaña Avanzado, clase CSS > escribimos botoncillo, que es la clase que pondremos en el módulo código.

Ajustes-modulo-CTA

La segunda sección. Módulo galería

Ahora vamos a generar la segunda sección. En ella pondremos el contenido que va a permanecer oculto hasta que pulsemos el botón.  Yo me he inclinado por una galería, así que crea una. Añade las fotos que quieras, intenta que tengan la misma anchura y altura. En los ajustes de la sección (OJO, de la SECCIÓN, no fila ni módulo), pestaña Avanzado, id css escribimos mostrar.

seccion-galeria-avanzado

El Módulo código. Añadiendo el JavaScript

Ahora solo nos queda insertar una líneas de JavaScript en un módulo tipo código. Este módulo podemos ponerlo en cualquiera de las secciones. Yo lo he puesto en las seccion del módulo CTA, antes de éste (mira la captura de la estructura más arriba). De manera que añadimos el módulo y en contenido pegamos el siguiente código:

<script type="text/javascript"> 
jQuery(document).ready(function() {
// ocultar el contenido
jQuery('#mostrar').hide();
jQuery('.botoncillo').click(function(e){
e.preventDefault();jQuery("#mostrar").slideToggle();
jQuery('.botoncillo').toggleClass('opened closed');
});
});
</script>

Y listo. Si todo ha ido bien, ya hemos conseguido lo que queríamos.  Mostrar contenido oculto al pulsar un botón en Divi.

Y como siempre (o casi siempre), el tutorial en formato vídeo

Si te ha parecido interesante, comparte. ¡Gracias!