Usted añadió un acordeón en Elementor, completó la sección de preguntas frecuentes, guardó la página y notó que el primer elemento aparece expandido. Usted no lo abrió. Pero Elementor decidió por usted. Este comportamiento está integrado en el widget y no se puede modificar desde los ajustes. Para una página de aterrizaje con una estructura limpia, esto resulta descuidado y, si el primer bloque es pesado, rompe el ritmo visual de toda la página.

Este problema existe desde hace años. La documentación oficial lo indica directamente: «El primer elemento del widget Acordeón se expande al cargar la página». Así de simple. Pero usted no tiene por qué resignarse a ver un acordeón forzosamente expandido. Existen cuatro soluciones, y cada una incluye las instrucciones a continuación.

A continuación se presentan métodos para cerrar el acordeón de Elementor por defecto: desde un fragmento de código de 30 segundos hasta alternativas nativas y complementos con una casilla de verificación en la interfaz. Estos métodos se han probado en Elementor 3.27-4.2 (Free y Pro) y funcionan en escritorio y móvil.

💡 Resumen rápido:

• Inserte un fragmento de JavaScript en un widget HTML o en Código personalizado, y el acordeón se cerrará 100 ms después de cargar
• Sustituya Acordeón por Alternar, un widget nativo de Elementor donde todas las pestañas están cerradas de fábrica
• Para minimalistas: una regla CSS oculta el primer elemento sin una sola línea de JavaScript
• Instale The Plus Addons o Essential Addons y obtenga una opción nativa «Abrir primera pestaña» directamente en los ajustes del widget

Método 1: fragmento de JavaScript, universal

El método más fiable. Elementor añade la clase elementor-active al primer elemento del acordeón al cargar. Solo necesita esperar a que se complete la renderización y eliminar esa clase.

Un fragmento en JavaScript puro, sin jQuery:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        const firstItem = document.querySelector('.elementor-accordion-item:first-child');
5
        if (firstItem) {
6
            const title = firstItem.querySelector('.elementor-tab-title');
7
            const content = firstItem.querySelector('.elementor-tab-content');
8
            if (title) title.classList.remove('elementor-active');
9
            if (content) {
10
                content.classList.remove('elementor-active');
11
                content.style.display = 'none';
12
            }
13
        }
14
    }, 100);
15
});
16
</script>

El retardo setTimeout de 100 milisegundos es crítico. Sin él, el script se ejecuta antes de que Elementor termine de inicializar el acordeón y las clases simplemente no se eliminarán. En proveedores de alojamiento lentos o páginas con una docena de widgets, auméntelo a 300-500 ms. Los usuarios de Elementor confirman en el foro: el método es estable hasta la versión 4.2.

Dónde insertarlo. Dos opciones. Primera, widget HTML: arrástrelo directamente encima del acordeón en el editor y pegue el fragmento. El código solo se ejecutará en esa página específica y no se cargará donde no haya acordeón. Segunda, Elementor → Código personalizado en el panel de administración de WordPress: cree una entrada, seleccione Ubicación body y publique. El código se aplicará globalmente, lo cual es conveniente cuando los acordeones están repartidos en una docena de páginas.

Si tiene varios acordeones y necesita cerrarlos todos, sustituya querySelector por querySelectorAll e itere sobre la colección:

1
<script>
2
document.addEventListener('DOMContentLoaded', function() {
3
    setTimeout(function() {
4
        document.querySelectorAll('.elementor-accordion-item').forEach(function(item) {
5
            const title = item.querySelector('.elementor-tab-title');
6
            const content = item.querySelector('.elementor-tab-content');
7
            if (title) title.classList.remove('elementor-active');
8
            if (content) {
9
                content.classList.remove('elementor-active');
10
                content.style.display = 'none';
11
            }
12
        });
13
    }, 100);
14
});
15
</script>

¿No funcionó al primer intento? Casi siempre es un problema de sincronización: aumente el retardo a 1000 ms.

Método 2: widget Alternar en lugar de Acordeón

El método nativo más simple no es luchar contra el acordeón, sino usar un widget diferente. Elementor incluye dos herramientas que se parecen pero se comportan de manera distinta: Acordeón y Alternar.

La diferencia clave:

Alternar es visualmente indistinguible de Acordeón: los mismos encabezados, los mismos iconos de flecha, la misma animación. Pero todas las pestañas están cerradas de fábrica, sin necesidad de código. Abra el panel de widgets, busque Alternar, arrástrelo a la página y añada elementos igual que en Acordeón. Listo.

El único matiz: Alternar permite expandir varias pestañas a la vez. Si la lógica de «una abierta, las demás cerradas» es importante, vuelva al Método 1.

Método 3: CSS, minimalista

¿JavaScript le parece excesivo? Cierre el primer elemento con CSS puro:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content {
2
    display: none !important;
3
}
4
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-title {
5
    border-bottom-width: 0;
6
}

El primer selector oculta el contenido de la primera pestaña. El segundo elimina el borde inferior del encabezado, que sin el contenido parece un corte abrupto. Coloque el código en la sección «Avanzado → CSS personalizado» del widget específico (para un acordeón concreto) o en Apariencia → Personalizar → CSS adicional (globalmente).

Nota: CSS no elimina la clase elementor-active, solo oculta visualmente el contenido. En el árbol DOM, la pestaña permanece «activa». Esto no afecta a la funcionalidad del sitio, pero si utiliza análisis personalizados para clics en acordeones o scripts de terceros vinculados a la clase, el comportamiento podría sorprenderle. Para la mayoría de los escenarios, este método funciona y es el más ligero.

Si su tema anula los estilos de Elementor, aumente la especificidad:

1
.elementor-accordion .elementor-accordion-item:first-child .elementor-tab-content.elementor-active {
2
    display: none !important;
3
}

¿Sigue sin funcionar? Probablemente el tema utiliza su propio JavaScript para forzar la expansión. Vuelva al Método 1: el fragmento JS se ejecuta más tarde y anula cualquier comportamiento del tema.

Método 4: complementos con una opción nativa

Algunos complementos de Elementor añaden una opción «Abrir primera pestaña» al Acordeón, un clic en lugar de código. Dos opciones probadas:

The Plus Addons for Elementor. Amplía el Acordeón estándar con la opción Default Open Tab → None, manteniendo todas las pestañas cerradas. La versión gratuita es suficiente. Como ventaja adicional, obtiene acordeones anidados, iconos de la biblioteca, shortcodes y plantillas de Elementor dentro de las pestañas. Página en WordPress.org.

Essential Addons for Elementor. Dos millones de instalaciones activas. El Acordeón de este complemento también comienza con las pestañas cerradas: las opciones Accordion State y Enable FAQ Schema están directamente en los ajustes del widget. Si Essential Addons ya está instalado para otros widgets (Advanced Data Table, Filterable Gallery), no necesita instalación adicional. Página en WordPress.org.

La desventaja es obvia: instalar un plugin con más de 100 widgets para una sola opción es excesivo. Pero si el complemento ya está en su configuración, obtiene una solución con un solo clic.

⁉️🤔 Preguntas frecuentes

¿Por qué Elementor no añade una opción al Acordeón estándar?

Los desarrolladores no han dado una razón exacta. Según los debates en el repositorio de Elementor en GitHub, el equipo considera que el comportamiento de «primera pestaña abierta» es correcto por accesibilidad. Las solicitudes de esta función están pendientes desde 2018. La prioridad de desarrollo se ha orientado hacia funciones de IA, contenedores Flexbox y rendimiento. Hasta que aparezca una opción, vote por la propuesta en GitHub y use el fragmento del Método 1.

El script no funciona en móvil. ¿Qué debo hacer?

En teléfonos y tabletas, Elementor utiliza el mismo marcado, pero la renderización es más lenta: procesadores menos potentes, más solicitudes asíncronas. Aumente el retardo setTimeout a 500-1000 ms. Mover el fragmento al pie de página mediante el gancho wp_footer también ayuda: el script se ejecuta al final, después de todos los estilos y el marcado de Elementor. En escritorio no hay diferencia, pero en móvil se nota.

¿Puedo usar una versión con jQuery?

Sí, pero no lo recomendamos. Desde la versión 3.0, Elementor utiliza JavaScript nativo para el frontend. El fragmento vainilla del Método 1 pesa unos 200 bytes, frente a los 87 KB de jQuery (minificado), y no depende de la carga de la biblioteca. Si su tema u otros plugins ya cargan jQuery, no hay diferencia. Pero para temas modernos con JavaScript puro, como Hello Elementor, la opción nativa es mejor: menos dependencias, mayor velocidad.

El método CSS no funciona; el primer elemento sigue visible.

Su tema anula los estilos de Elementor con mayor prioridad o utiliza JS para forzar la expansión. CSS es impotente en este escenario: el script del tema se ejecuta más tarde y vuelve a abrir la pestaña. Solo el fragmento JS del Método 1 resuelve el conflicto cronológicamente: se ejecuta al final y toma el control.

¿El fragmento funciona con temas personalizados y temas hijo?

Sí. El fragmento opera sobre las clases propias de Elementor: .elementor-accordion-item, .elementor-tab-title y .elementor-tab-content. Estas no dependen del tema. Lo hemos probado en Hello Elementor, Astra, GeneratePress y Kadence: funciona de manera idéntica en todos. La excepción son los temas que reemplazan por completo el marcado de los widgets de Elementor mediante filtros (poco frecuente, sobre todo en paquetes premium como Avada).

Acordeón o Alternar: cuál elegir

Alternar resuelve el problema sin código, pero permite a los usuarios expandir varias secciones a la vez. Para una página de preguntas frecuentes o una sección de referencia, esto es incluso una ventaja: los visitantes ven todas las respuestas simultáneamente. Alternar es nativo, rápido y no requiere mantener un fragmento cuando Elementor se actualiza.

Si la lógica de «una abierta, las demás cerradas» es esencial, use Acordeón y JavaScript del Método 1. El fragmento de cuatro líneas funciona de manera fiable, no depende de la versión de Elementor y cierra el problema por completo.

Comience por la opción más simple: abra el editor, sustituya Acordeón por Alternar y compruebe si el comportamiento le conviene. Si no, vuelva al fragmento. Cinco minutos y el acordeón tendrá exactamente el aspecto que usted pretendía.