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!

WhatsApp
Facebook
Twitter

2 Responses

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *