Cómo cerrar por defecto el acordeón de Elementor

¿Te gustaría que todas las pestañas de tu acordeón de Elementor aparezcan cerradas al cargar la página? En este tutorial sencillo te explico paso a paso cómo lograrlo, sin complicaciones y apto para principiantes.

Si trabajas con WordPress y utilizas Elementor o Elementor Pro, seguro que conoces el widget de acordeón. Esta herramienta te permite organizar contenido en secciones desplegables, ideal para crear preguntas frecuentes (FAQ), menús de navegación o simplemente ahorrar espacio en tu diseño web sin que la página quede interminable.

Algunos usuarios incluso utilizan este recurso para estructurar contenidos con títulos H2 en cada pestaña, mejorando así la experiencia de usuario y el SEO on-page. Pero hay un pequeño detalle que suele molestar: por defecto, la primera pestaña siempre aparece abierta. ¿Te gustaría cambiar eso? Sigue leyendo.

Elementor está diseñado para mostrar la primera sección del acordeón como "activa" al cargar la página. Es un comportamiento predeterminado que busca guiar al usuario, pero en muchos casos no es lo que necesitamos. Por suerte, con un pequeño ajuste de código podemos solucionarlo fácilmente.

Para que ninguna pestaña del acordeón se abra automáticamente, añade este código JavaScript en la sección Header de tu plantilla:

Pasos para añadir el código:

1. Ve a tu panel de WordPress: Aparencia > Editor de temas
2. Selecciona tu plantilla activa y haz clic en Header
3. Añade un widget de tipo "HTML" o "Code"
4. Pega el siguiente script:

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

¿Qué hace este código? Espera 100 milisegundos (para asegurar que Elementor haya cargado), elimina la clase que mantiene abierta la primera pestaña y oculta su contenido. ¡Listo! Ahora todas las secciones empezarán cerradas.

Si prefieres que el acordeón se comporte de forma normal en escritorio, pero que todas las pestañas estén cerradas en móviles (para mejorar la experiencia en pantallas pequeñas), usa este código adaptado:

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

Nota importante: Este script detecta si el ancho de la pantalla es menor a 768 píxeles (tamaño típico de tablets y móviles) y solo entonces aplica el cierre de las pestañas. Así mantienes la funcionalidad original en escritorio y optimizas la navegación en dispositivos móviles.

• Haz una copia de seguridad antes de modificar código en tu web. Así, si algo no funciona como esperas, podrás revertir los cambios fácilmente.
• Si usas un plugin de caché, limpia la caché después de añadir el código para ver los cambios al instante.
• Prueba siempre en modo incógnito o en otro navegador para asegurarte de que el script funciona correctamente.
• Si tu tema o plugins desactivan jQuery, puede que necesites cargarlo antes. La mayoría de temas modernos ya lo incluyen, pero tenlo en cuenta si el código no surte efecto.

Controlar el comportamiento del acordeón de Elementor es más sencillo de lo que parece. Con estos dos pequeños scripts puedes adaptar su funcionamiento a tus necesidades, mejorando tanto la experiencia de usuario como el rendimiento visual de tu web.

Recuerda: la clave está en probar, ajustar y siempre priorizar la claridad para tus visitantes. Si este tutorial te ha sido útil, ¡compártelo o déjanos un comentario! Nos encanta saber que estamos ayudando a crecer tu proyecto web. 🚀