DisclosureGroup

FAQ / Accordion

Group disclosures together with exclusive (accordion) or non-exclusive (multi-open) behavior. Uses data-disclosure-group for automatic initialization.

Exclusive Group (Accordion)
Opening one item automatically closes the others. Only one answer is visible at a time.
What is @disclosures/core?

A lightweight, framework-agnostic library for animated disclosure components. It provides smooth height transitions for native <details> elements using the Web Animations API.

Is it accessible?

Yes. It uses native <details>/<summary> elements, respects prefers-reduced-motion, supports keyboard navigation (Tab + Enter/Space), and includes focus-visible styles.

What browsers are supported?

All modern browsers that support the Web Animations API: Chrome, Firefox, Safari, and Edge.

Does it have dependencies?

Zero dependencies. It is pure TypeScript/JavaScript with CSS. The IIFE build is a single file you can load via a <script> tag.

Can I use it with React / Vue / Svelte?

Absolutely. The core library is framework-agnostic. Framework-specific wrappers (like shadcn-disclosures for React) can be built on top of the CSS and JS primitives.

Non-Exclusive Group (Multi-Open)
Multiple items can be open simultaneously. Set data-disclosure-group="false".
How do I install it?

Via npm: npm install @disclosures/core, or load the IIFE build directly from a CDN with a <script> tag.

How do I customize the animation?

Override the CSS custom properties --disclosure-duration and --disclosure-easing, or pass options to new AnimatedDetails(el, { duration: 500, easing: 'ease-out' }).

How do I style it?

The library uses BEM classes (.disclosure, .disclosure__summary, etc.) and CSS custom properties. You can override any token or add your own variant classes.

i
Exclusive vs. Non-Exclusive

data-disclosure-group (or data-disclosure-group="true") creates an accordion where only one item is open at a time. data-disclosure-group="false" allows multiple items to be open simultaneously.

HTML Markup
Wrap multiple disclosures in a container with data-disclosure-group.
<!-- Exclusive (accordion) -->
<div data-disclosure-group>
  <details class="disclosure disclosure--faq disclosure--indicator-plus" data-animated>
    <summary class="disclosure__summary">
      <span class="disclosure__indicator" aria-hidden="true"></span>
      <span class="disclosure__label">Question 1</span>
    </summary>
    <div class="disclosure__content">
      <div class="disclosure__content-inner">Answer 1</div>
    </div>
  </details>
  <!-- more items... -->
</div>

<!-- Non-exclusive (multi-open) -->
<div data-disclosure-group="false">
  <!-- same markup -->
</div>