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!

Share on whatsapp
WhatsApp
Share on facebook
Facebook
Share on twitter
Twitter

21 respuestas

    2. Hola, te agradezco mucho por tus conocimientos que nos brindas.
      Estoy intentando crear el botón para mostrar y ocultar una sección de reseñas. Pero no he tenido suerte, nosé en qué he podido fallar.
      He creado el tema hijo y he seguido los pasos a pie de la letra y aún así sin éxito.

      Quizás puedas checar mí página, casi la parte final está el botón VER MAS.
      Te lo agradecería, gracias saludos

      Responder

  2. Hola buenas, lo he echo tal cual lo pones en el vídeo, he copiado los códigos exactamente igual y he puesto las clases exactamente igual.
    Uso Genesis con un tema hijo genesis-sample, he creado el archivo nuevo de js y después en funciones he puesto la función.
    Y no hace absolutamente nada cuando pulso, si lo oculto por css de primera hora se queda oculto y si lo dejo que se muestre se queda mostrado.
    No se si sabrás porque me puede estar pasando eso, he copiado los textos directamente desde aquí.
    Gracias por el aporte es muy util.
    Un saludo.

    Responder

    1. Hola Fernando, pueden ser varias cosas…o bien que no te esté cogiendo bien el fichero de javascript..o la función. Para comprobar lo primero, puedes echar un ojo al inspector de chrome cuando cargues la página en la pestaña Network para ver que te carga el archivo JS. Si lo carga, es la algún error con el evento de la función.

      Si no encuentras solución, escríbeme al formulario de contacto.

      Saludos.

      Responder

  3. Efectivamente no me carga el custom-script.js, lo he metido en el js del tema y me lo ha cogido perfectamente y ahora me funciona.
    Muchas gracias por su ayuda.
    Un saludo.

    Responder

  4. hola, quiero hacer que el contenido oculto se muestre automaticamente despues de XX tiempo, para asi asegurarme de que el visitante termine de ver un video que esta en la pagina. sabes como podria hacer esto? gracias

    Responder

  5. hola buenas soy nuevo en esto quisiera poder hacer esto pero hice tal cual las configuraciones cree el tema hijo y segui sus instrucciones no se donde este cometiendo el error le agradeceria si me ayuda quisiera colocar esto en la parte de noticias

    Responder

    1. Hola Duvan, es difícil saber donde esta el error sin poder ver nada. Revisa bien las instrucciones del tutorial porque funciona perfectamente. Saludos.

      Responder

  6. Hola Alberto buen día, gracias por compartir el tutorial, tengo el mismo inconveniente nombrado en un comentario anterior, hice el proceso tal cual y mantuve los mismos nombres del tutorial, me oculto el contenido pero el botón no hace nada al darle click, estoy trabajando bajo el tema Neve_child.
    Espero me puedas ayudar, gracias

    Responder

    1. Hola Milton, no se cuál puede ser el problema sin ver el código. Una forma de averiguar que está pasando es que inspecciones la web con el inspector de Chrome y vayas al apartado «Consola» a ver que error te da cuando haces click. Saludos.

      Responder

  7. Seguí el proceso y me salia un mensaje que faltaba (swiper.min.js.map,) así que lo descargue y lo instale en la ruta indicada, efectivamente desapareció el mensaje en Consola, pero sigue sin funcionar el botón, podrías ayudarme de otra forma??

    Responder

    1. Hola Daniel, tienes un plugin de caché? en ese caso, desactívalo o borra la caché. También es recomendable si nada funciona que desactives todos los plugins salvo los de Elementor y vuelvas a probar. Saludos.

      Responder

Deja una respuesta

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

Logo Alberto Perojo Desarrollador Web
Icono Telegram Icono Email

Copyright © 2021 albertoperojo.com

Política de Privacidad · Política de Cookies · Aviso Legal