Desplegable (disclosure) y acordeón
Construido sobre <details>, así que funciona sin JavaScript. El componente opcional añade eventos cancelables y el comportamiento de acordeón exclusive.
<details class="iv-disclosure" data-iv-component="disclosure">
<summary class="iv-disclosure__summary">What is included in the free tier?</summary>
<div class="iv-disclosure__content">
<p class="iv-u-m-0">Up to three projects, 5 GB of storage and the full component library. No credit card is required and the tier does not expire.</p>
</div>
</details>Acordeón
Varios desplegables dentro de iv-accordion. Con data-iv-exclusive="true", abrir uno cierra a sus hermanos.
<div class="iv-accordion">
<details class="iv-disclosure" data-iv-component="disclosure" data-iv-exclusive="true" open>
<summary class="iv-disclosure__summary">How is the monthly usage calculated?</summary>
<div class="iv-disclosure__content">
<p class="iv-u-m-0">Usage is measured per build minute and reset on the first day of every billing period. Unused minutes do not carry over.</p>
</div>
</details>
<details class="iv-disclosure" data-iv-component="disclosure" data-iv-exclusive="true">
<summary class="iv-disclosure__summary">Can I change plan in the middle of a period?</summary>
<div class="iv-disclosure__content">
<p class="iv-u-m-0">Yes. Upgrades apply immediately and the remaining balance is prorated; downgrades take effect on the next period.</p>
</div>
</details>
<details class="iv-disclosure" data-iv-component="disclosure" data-iv-exclusive="true">
<summary class="iv-disclosure__summary">Which payment methods do you accept?</summary>
<div class="iv-disclosure__content">
<p class="iv-u-m-0">Credit card and SEPA direct debit. Annual plans can also be paid by bank transfer against an invoice.</p>
</div>
</details>
</div>// data-iv-component="disclosure"
{
exclusive: true,
}Opciones, métodos y eventos
| Opción | Atributo | Por defecto |
|---|---|---|
exclusive | data-iv-exclusive | false |
open(), close(), toggle(), isOpen, destroy(). Eventos: iv:open e iv:close (cancelables) y después iv:opened / iv:closed. Cancelar un cambio iniciado por el usuario restaura el estado anterior.
Teclado
Enter o Espacio sobre el resumen lo abre y lo cierra (comportamiento nativo).
Errores frecuentes
- Esconder contenido esencial en un desplegable cerrado sin otra forma de llegar a él, por ejemplo precios o textos legales.
- Anidar controles interactivos dentro de
<summary>.