Contenedores
Organiza el contenido en secciones plegables. Sirve para condensar información extensa, como las preguntas frecuentes.
<vadavo-accordion> envuelve un details/summary nativo. Su primer hijo es un summary (el título, siempre visible) seguido de un div con la clase content. El estado abierto/cerrado es el del details, y la propiedad open del acordeón lo lee y lo escribe desde JavaScript.
La caja es una tarjeta, y el acordeón coloca por sí mismo la marca del summary: un signo más que gira un octavo de vuelta al abrirse.
El atributo open en un details hace que empiece desplegado.
<vadavo-accordion>
<details open>
<summary>¿Tengo permanencia con VADAVO?</summary>
<div class="content">
No. Si encuentras un servicio más adecuado o quieres darte de baja, hazlo sin trampa ni cartón.
Te ayudamos con la migración a tu nuevo proveedor.
</div>
</details>
</vadavo-accordion>
<vadavo-accordion>
<details>
<summary>¿Desde dónde dais soporte?</summary>
<div class="content">
Desde Valencia, en español, inglés y valenciano. Por teléfono, chat y WhatsApp de 8:30 a 21:30 de
lunes a viernes, y 24/7 por ticket o email.
</div>
</details>
</vadavo-accordion>El atributo name en el details agrupa: abrir uno cierra los demás que llevan el mismo nombre. Lo resuelve el navegador, sin JavaScript de por medio.
<vadavo-accordion>
<details name="faq" open>
<summary>¿Puedo tener todo en una sola factura?</summary>
<div class="content">
Sí. Teléfono, internet, hosting y cloud van en una única factura mensual, desglosada y clara, para
que reduzcas papeleo.
</div>
</details>
</vadavo-accordion>
<vadavo-accordion>
<details name="faq">
<summary>¿Cuánto tarda una migración?</summary>
<div class="content">
Entre 24 y 72 horas según el volumen. La preparamos y la ejecutamos nosotros, y avisamos antes del
cambio de DNS.
</div>
</details>
</vadavo-accordion>
<vadavo-accordion>
<details name="faq">
<summary>¿Qué pasa con mi correo?</summary>
<div class="content">
Se migra con el resto del servicio, con sus cuentas y su histórico. No hay corte de recepción.
</div>
</details>
</vadavo-accordion>| Token | Qué nombra |
|---|---|
--accordion--color--summary-hover | El color del título de un apartado al apuntarlo. |
--accordion--color--icon | El color de la marca que abre y cierra cada apartado. |