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')
);}
add_action( 'wp_enqueue_scripts', 'custom-script' );

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

37 comentarios

    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

  10. Hola Alberto, encantada de saludarte. Todo funcionaba bien hasta que he actualizado WordPress a la versión 5.6. Después de la actualización no funciona el mostrar y ocultar contenido según explicas en este post y no se a qué puede deberse y cómo solucionarlo… ¿Qué puedo hacer para que vuelva a funcionar todo como antes?, ¿Cuál puede ser el problema?
    Muchas gracias.
    Saludos

    Responder

  11. Hola Alberto

    Gracias por ese video tan excelente, necesitaba hacer ese efecto y funciona super bien en mi página, pero ahora tengo un problema, el botón hace el Toggle perfectamente mostrando y ocultando, pero al mostrar, me corre todo a la derecha, pero al acercar el navegador y volverlo a dejar al zoom normal, ya se acomoda y no molesta más, que será??

    la URL es:

    http://www.freskaleche.com.co/home/tradicion-100-leche

    Te agradecería mucho poder solucionar esto tan raro.

    Gracias

    Responder

  12. En el código que has copiado bajo el video, ¿falta una linea en la parte del functions.php?

    En el video aparece al final «add_action( ‘wp_enqueue_scripts’, ‘custom-script’ );»

    Responder

  15. Hola Alberto. Utilice tu explicación y funciono perfectamente, pero quisiera agregarle la misma funcionalidad a una imagen, es decir que en lugar de tocar un botón se haga clic en una imagen y despliegue un contenido oculto.
    Se podria realizar eso?
    Muchas gracias

    Responder

    1. Hola Florencia, sí, podría hacerse de la misma forma. Tendrás que asignarle una clase a la imagen en la parte de avanzado del widget y luego seleccionarlo.
      jQuery(document).on(‘click’, ‘.clase_de_la_imagen’, function (event) { …

      Responder

  16. Gracias por el Material, muy bueno, pero tengo la duda de donde exactamente incorporo estos archivos, si me pudiera ayudar estaría muy agradecido. Saludos

    Responder

    1. Hola Abraham, esto yo lo he hecho metiéndolo en el child theme (tema hijo) de la web. También puedes utilizar el plugin «Code Snippets» para meter los códigos. Saludos.

      Responder

  18. Hola Alberto un gusto saludarte, estoy usando cada detalle que indicaste acá: https://albertoperojo.com/tutoriales-elementor/mostrar-y-ocultar-contenido-spoiler-en-elementor/ pero solo me queda una duda… Tengo dos botones y el código me funciona a la perfección pero necesito que cuando cliquee el boton A muestre ese contenido y cuando haga clic en el botón B oculte el contenido del botón A y muestre solo el contenido del botón B, de igual manera a la inversa… Serías tan amable de ayudarme por favor

    Responder

    1. Hola José, necesitas definir otro botón con otro clase y repetir el código que hace la inteacción. Te pongo un ejemplo para el botón B:

      jQuery(document).on(‘click’, ‘div.botonB .elementor-button-link’, function (event) {
      event.preventDefault();
      jQuery(‘.contenido-que-quieres-ocultar’).hide();
      });

      Responder

  19. Gracias por el tip, una consulta. ¿Cómo puedo cambiar el texto al botón? – Que oculto diga «Leer más» y visible cambie a «Mostrar menos», gracias.

    Responder

Deja una respuesta

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

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