Mostrar y ocultar contenido (spoiler) en Elementor

Buenas, en este vídeo vamos a ver cómo ocultar/mostrar contenido en Elementor a través de un botón.

Parece mentira que una cosa tan sencilla como esta no esté resuelta todavía de forma nativa por el plugin, sin embargo, es relativamente fácil hacerlo con un par de líneas de código javascript, o jQuery en nuestro caso.

En el ejemplo simplemente necesitaremos un botón, que nos servirá de desencadenante para mostrar/ocultar el contenido y una sección que estará oculta en un principio. Necesitamos asignar clases tanto al botón como a la sección para poder referenciarlos en el código.

El funcionamiento es sencillo: al pulsar el botón, se dispara un evento de jQuery en el que hacemos un toggle() para mostrar u ocultar la sección.

Os dejo el vídeo donde lo explico todo en detalle, así como el código a utilizar.

Código utilizado

functions.php
function custom_script() { wp_enqueue_script( 'custom-script', get_stylesheet_directory_uri() . '/js/custom_script.js', array('jquery') );}

style.css
.contenido-oculto { display: none; }

custom_script.js
jQuery(document).on('click', 'div.btn-oculta .elementor-button-link', function (event) { event.preventDefault(); jQuery('.contenido-oculto').slideToggle(); });

Si te ha gustado, comparte!

2 Responses

Israel Bernardo dice:

noviembre 20, 2018 a las 8:11 am

Muy bien muy interesante. ¿No sería mejor haber hecho un plugin en lugar de hacerlo en la propia plantilla?.

Responder
1. admin dice:
  
  noviembre 20, 2018 a las 6:54 pm
  
  Hola Israel, se podría hacer pero en este caso para algo tan puntual no creo que merezca la pena. Gracias!
  
  Responder