Expander

Summary

Collapsible content behind a trigger: the "reveal text" pattern with the trailing-ellipsis trigger. Auto-init binds every .neura-expander-trigger[aria-controls] on load.

Examples

<div id="more" class="neura-expander-content" aria-hidden="true">
  <span class="neura-expander-short-content">Teaser text…</span>
  The full content revealed on expand.
</div>
<a class="neura-expander-trigger" aria-controls="more" href="#">Read more</a>

State lives in ARIA attributes, not extra classes: the JS toggles aria-expanded on the trigger and the content and aria-hidden on the content, and the CSS keys visibility off those attributes. To start expanded, render the content with aria-expanded="true" aria-hidden="false".

For the reveal-text pattern, place the trigger inside the content with .neura-expander-reveal-text - it pins to the end of the visible text with a leading ellipsis, and flows inline (ellipsis hidden) once expanded. Give the collapsed content its teaser height in your own CSS: the base .neura-expander-content collapses to height: 0.

CSS classes

Class	Effect
`.neura-expander-trigger`	Click target. Pair with `aria-controls="…"` pointing at the content (required for auto-init).
`.neura-expander-content`	The collapsible region - `height: 0` and clipped until `aria-expanded="true"`; `aria-hidden="true"` hides it entirely.
`.neura-expander-short-content`	Optional teaser element; hidden when given `aria-hidden="true"`.
`.neura-expander-reveal-text`	On a trigger inside the content: trailing-ellipsis "reveal text" placement (see above).
`.neura-expander-ellipsis`	Optional element hidden while the content is expanded.

JavaScript API

const ex = Neura.expander(triggerOrContent);  // element or selector string;
                                              // singleton per trigger
ex.expand(); ex.collapse(); ex.toggle();
ex.isExpanded;                       // current state (boolean)
ex.trigger; ex.content;              // the resolved elements
ex.on('expand', fn); ex.on('collapse', fn); ex.off('expand', fn);
// The events also bubble from the content element as CustomEvents:
//   'neura-expander-expand' / 'neura-expander-collapse'

AUI compatibility