Hierarchical Nesting

Nested Hierarchy

Disclosures can be nested to create multi-level hierarchies. Visual depth is communicated through subtle background color changes.

i Notice how each nesting level has a slightly different background. This visual cue helps users understand their position in the hierarchy.
Documentation Structure
An example of nested disclosures organizing documentation content.
Getting Started

Everything you need to know to start using the component library.

Installation

Install the package using your preferred package manager.

npm 
npm install @disclosures/core
yarn 
yarn add @disclosures/core
pnpm 
pnpm add @disclosures/core
Basic Usage

Add the CSS and JS to your page, then use the markup pattern.

<link rel="stylesheet" href="@disclosures/core/dist/styles.css">
<script src="@disclosures/core/dist/index.global.js"></script>
<script>Disclosures.autoInit();</script>
Components

Reference documentation for all available components.

AnimatedDetails

The core class that wraps a native <details> element and adds smooth height transitions using the Web Animations API.

DetailsGroup

Manages a group of details elements as an accordion, ensuring only one is open at a time.

API Reference

Detailed API documentation for options, methods, and CSS custom properties.

Visual Depth Levels
Each nesting level uses a distinct background color for spatial awareness.
Level 1 --depth-1-bg
Level 2 --depth-2-bg
Level 3 --depth-3-bg