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

Cómo hacer que los acordeones de Elementor estén cerrados por defecto - MARIO GOMEZ LUELMO
En Elementor, el bloque "acordeón" tiene un pequeño fallo: siempre tiene el primer elemento desplegado. Te explico cómo hacer que todos estén cerrados por defecto.

Índice de contenidos

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. Uno de sus bloques más útiles es «acordeón», que por cierto incluye marcado Schema de FAQ’s. Eso es fabuloso. 😀 Pero tiene un pequeño fallo: siempre tiene el primer elemento del acordeón 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 de esta herramienta.

Puede llegar a ser algo muy común que un cliente te pida que pongas información en acordeones. 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. 

Tiras mano de tu maquetador visual Elementor, utilizas el bloque «acordeón» y el problema es que, por defecto, en Elementor siempre la primera pestaña del acordeón sale abierta. ¡Y hay clientes que odian esto! ¡Yo también! 😀 ¿Tiene solución? Claro que sí.

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

<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, rápido y para toda la familia.

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.

¿Te ha servido? ¡Compártelo!

Deja una respuesta

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

Ver más

  • Responsable: Mario Gómez Luelmo.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a 1&1 IONOS España S.L.U. que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.