Cómo hacer que los acordeones de Elementor estén cerrados por defecto

En Elementor, los bloques «acordeón» y «conmutador» tienen un pequeño fallo: siempre tienen el primer elemento desplegado. Te explico cómo hacer para que todos estén cerrados por defecto.

Elementor se ha convertido, para muchos, en el maquetador visual favorito para WordPress. En mi caso lo uso muy a menudo en proyectos de mis clientes y en proyectos propios. Dos de sus bloques más útiles son «acordeón» y «conmutador«, que por cierto incluyen marcado Schema de FAQ’s. Eso es fabuloso para mejorar el SEO Onsite de tu web. 😀 Pero tienen un pequeño fallo: siempre tienen el primer elemento desplegado.

En el post de hoy te explico cómo hacer que los acordeones de Elementor estén cerrados por defecto, un pequeño y rápido truco que te va a ayudar a dar un aspecto único a los acordeones y conmutadores de tu web.

Puede llegar a ser algo muy común que un cliente te pida que pongas información en acordeones/conmutadores. Se usa bastante por temas de SEO. Además de podérsele aplicar un marcado de Schema de tipo FAQ’s, la página tiene que tener un cierto número de palabras para favorecer su posicionamiento SEO, pero no hay manera de que tanto texto quede bien. ¡Mete un acordeón y listo! 

La primera opción del acordeón o conmutador en Elementor siempre sale abierta, por lo menos hasta que implementen una opción que los cierre por defecto. ¡¡¡Y hay clientes que odian esto!!! ¡Yo también! 😀

Solución

Simplemente coloca un elemento HTML o ingéniatelas para pegar el siguiente código donde quieras (tranqui porque va a ser un elemento invisible para el usuario):

<script> 
jQuery(document).ready(function($) { 
var delay = 100; setTimeout(function() { 
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay); 
}); 
</script>

Y… ¡Tachán! ¡Magia! 😀 Se cierra por defecto. No hay que hacer nada más. Fácil, útil y rápido.

Cómo hacer que el acordeón de Elementor se cierre solamente en móviles

Actualizo este contenido con una pregunta de uno de mis clientes, que me pedía cómo hacer que este script funcione solamente para móviles. Como me parece un tema muy interesante, lo comparto en este post por si a alguien más le hace falta esta modificación.

Para aplicar algo a móviles generalmente se emplea un parámetro que comprueba el tamaño de la pantalla y de manera condicional aplica o no el script. En nuestro caso deberías cambiar el código por esto:

<script>
if(window.outerWidth < 425) {
  alert('jQuery(document).ready(function($) {
var delay = 100; setTimeout(function() {
$('.elementor-tab-title').removeClass('elementor-active');
 $('.elementor-tab-content').css('display', 'none'); }, delay);
}); ');
}
</script>

Y… ¡Magia otra vez! ¿Has visto qué fácil? Si es que esto de saber un poco de programación te va a resolver la vida en muchos proyectos, por lo menos hasta que el desarrollador (Elementor) decida implementar una actualización que lo permita.

Puedes cambiar el valor de window.outerWidth por los píxeles que consideres máximos en el ancho de una pantalla de dispositivo móvil. En este caso utilizo 425, ya que he podido comprobar en Google Analytics que es la resolución más común entre los dispositivos móviles de las visitas a mi web.

¿Te ha servido? ¡Compártelo! Y si vienes mucho por aquí a ver este artículo… ¡guárdatelo en favoritos!

Deja un comentario