Cómo configurar el Widget Accordion (Acordeón) de Elementor para que esté cerrado por defecto

Elementor incluye un widget de acordeón que, al igual que el widget TOGGLE, resulta ideal para crear secciones como FAQs o desplegables similares. Puedes añadir tantos elementos como necesites, pero por defecto, Elementor abre automáticamente el primer elemento del acordeón, y no existe una opción nativa para que todos aparezcan cerrados desde el inicio. Esto puede resultar incómodo si tu intención es ocultar contenido hasta que el usuario decida interactuar.

¿Cómo lograr que todos los elementos del acordeón estén cerrados por defecto?

Para forzar este comportamiento, puedes usar el siguiente fragmento de JavaScript:

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

Simplemente añade un widget HTML justo encima del widget de Acordeón y pega este código en el campo correspondiente del panel de configuración.

Una vez hecho esto y completada la edición del resto de la página, guarda y actualiza para ver los cambios aplicados.

Llegué a esta solución mientras trabajaba en un proyecto para un cliente que necesitaba mostrar una sección de preguntas frecuentes en su web. Al implementar el widget de Acordeón en Elementor, noté que el primer ítem aparecía abierto por defecto, lo cual no encajaba con el diseño ni con la intención de mantener el contenido oculto hasta que el usuario interactuara. Como Elementor no ofrece una opción nativa para que todos los elementos estén cerrados al cargar la página, investigué hasta encontrar esta alternativa mediante JavaScript, que comparto aquí por si te encuentras con la misma necesidad.

¿Y si tienes varios acordeones en distintas páginas?
En ese caso, te conviene aplicar el código como JavaScript personalizado desde el panel de WordPress. Solo tienes que ir a Elementor → Código personalizado, hacer clic en Agregar nuevo, asignarle un nombre, pegar el código y elegir la ubicación (encabezado, cuerpo o pie de página). Funciona en cualquiera de ellas. Finalmente, publica el código.

Para confirmar que todo funciona correctamente, visita cualquier página con acordeones y verifica que ahora todos aparecen cerrados al cargar.

Limitaciones del widget Acordeón de Elementor
Aunque este widget es útil para mostrar preguntas frecuentes, solo permite añadir texto y no admite contenido dinámico desde plantillas. Si necesitas crear acordeones con imágenes u otros elementos, puedes recurrir a complementos como JetElements o JetTabs, que amplían las posibilidades del constructor.