Antes tenemos que diferenciar que en Elementor contamos con dos widgets que tendemos a confundir, el conmutador y el acordeón. Las diferencias básicamente son dos:
- En el conmutador si aparece cerrado por defecto la primera pestaña, pero cuando vamos abriendo pestañas las anteriores quedan abiertas, que a mi pareces es un problema de usabilidad
- El acordeón evita el problema del conmutador pero nos encontramos con el tema que vamos a tratar, que la primera pestaña del acordeón siempre aparece abierta..
En el mercado hay plugins y addons para Elementor que permiten que el acordeón aparezca cerrado desde el incio e incluso con algunos códigos Javascript si buscas con Google, pero en vez de eso os voy a mostrar una forma sencilla de hacerlo con una línea de CSS.
Una vez tenemos nuestro acordeón cerrado vamos a Avanzado y le ponemos la clase «accord».
Después en la parte de avanzado del propio acordeón (o de la columna o la sección si tenemos varios acordeones), vamos a la parte de CSS personalizado y añadimos la siguiente línea de código:
.accord .elementor-accordion > div:first-of-type {display:none;}
Lo que hacemos es decirle que a al clase «.elementor-accordion» que oculte el primer div del acordeón. Obviamente en esa primera pestaña no pondremos contenido útil, dejaremos como titulo «hidde» y el contenido vacío.
Como comentaba antes, hay muchas formas de hacerlo usando javascript o con algún addon adicional. Personalmente, por experiencia, esta forma es la que mejor funciona ya que no instalamos plugins adicionales y evitamos posibles errores de javascript.
