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.
6 comentarios
Muy bien muy interesante. ¿No sería mejor haber hecho un plugin en lugar de hacerlo en la propia plantilla?.
Hola Israel, se podría hacer pero en este caso para algo tan puntual no creo que merezca la pena. Gracias!
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.
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.
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.
Me alegro! 🙂