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.
21 respuestas
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, 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
https://www.lalysstore.com/
Hola Angel, he visto que ya lo tienes solucionado. Me alegro, saludos!
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! 🙂
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
Hola Alex, perdón por la demora en contestar. Podrías utilizar una función en JavaScript para esperar X segundos. Te dejo algo más de información en este post: https://stackoverflow.com/questions/951021/what-is-the-javascript-version-of-sleep
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
Hola Duvan, es difícil saber donde esta el error sin poder ver nada. Revisa bien las instrucciones del tutorial porque funciona perfectamente. Saludos.
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
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.
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??
Creo que el swiper no tiene nada que ver. Escríbeme a hola@albertoperojo.com y miramos cómo solucionarlo. Saludos.
Amigo ayúdeme por favor, hize todo lo que dijo, y en modo administrador funciona de maravilla, pero al momento de probarlo desde modo incognito ya no sirve, que puede ser?
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.
saludos, he cargado los códigos tal cual , pero al momento de presionar el botón solo me recarga la pagina
que puede ser , saludos
Hola Pablo, es difícil saberlo sin verlo. Mándame el link por el formulario de contacto a ver si puedo echarle un ojo. Saludos.