Disclosure

Accordion

Collapsible sections built on native <details>.

stableEnhancer: enhanceAccordionBuilt on <details>hydrateless/accordion.css

Collapsible sections built on the native <details>/<summary> elements. CSS handles open and close with zero JavaScript. The optional enhancer enforces single-panel-open behavior and adds the right ARIA wiring.

Accordion

With the enhancer, opening one panel closes the others. Toggle JS off and each <details> works on its own.

What is Hydrateless?

A library of accessible UI primitives that work with semantic HTML and CSS first, with optional JS enhancers.

Does it require JavaScript?

No. Most components work with CSS alone. JS is loaded only where an interaction truly needs it.

Is it themeable?

Yes. Every component is driven by CSS variables, with dark mode built in.

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceAccordion } from '@hydrateless/enhancers/accordion';

const handle = enhanceAccordion(container, { allowMultiple, defaultValue, onValueChange });
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
`allowMultiple`	`boolean`	`false`	Let several panels stay open at once.
`defaultValue`	`string \| string[]`	—	Initially open item value(s).

Events and callbacks

Event / Callback	Payload	Description
`hl:change`	`{ value: string }`	Fires when the open panel changes.

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
`--hl-border`	Divider between items.
`--hl-fg`	Summary text color.

JavaScript

Props

Events and callbacks

CSS variables

Accessibility

Related