Skip to content
Español

Navigate

Español

Type to search. Press Escape to close.

    Components · js

    Disclosure and accordion

    Built on <details>, so it works without JavaScript. The optional component adds cancelable events and the exclusive accordion behaviour.

    CSS: css/components/disclosure.css. JS (optional): @intervolutions/ivolt/disclosure or auto.js.

    A panel that foldsfixtures/disclosure/basic.htmlOpen alone — A panel that folds
    <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>

    Accordion

    Several disclosures inside iv-accordion. With data-iv-exclusive="true" opening one closes its siblings.

    An accordion of disclosuresfixtures/disclosure/accordion.htmlOpen alone — An accordion of disclosures
    <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,
}

    Options, methods, events

    OptionAttributeDefault
    exclusivedata-iv-exclusivefalse

    open(), close(), toggle(), isOpen, destroy(). Events: iv:open and iv:close (cancelable), then iv:opened / iv:closed. Cancelling a user-initiated toggle restores the previous state.

    Keyboard

    Enter or Space on the summary toggles it (native behaviour).

    Common mistakes

    • Hiding essential content in a closed disclosure with no other way to reach it, such as prices or legal text.
    • Nesting interactive controls inside <summary>.