CngxDisclosure

Generic expand/collapse (disclosure) behavior.

Applied to the trigger element (button, heading, etc.). Manages aria-expanded and aria-controls host attributes directly - no need to compose CngxAriaExpanded separately.

Supports controlled ([cngxDisclosureOpened]) and uncontrolled modes, following the same pattern as CngxDrawer and CngxSort.

The consumer decides how to render/hide the content. Two approaches:

DOM removal (simplest, no animation):

@if (group.opened()) { <div id="content">…</div> }

Hidden attribute (enables CSS transitions):

<div id="content" [hidden]="!group.opened()">…</div>

FAQ accordion#

<button cngxDisclosure #faq="cngxDisclosure" [controls]="'answer-1'">
  Question 1
</button>
@if (faq.opened()) {
  <div id="answer-1">Answer to question 1.</div>
}

Nav group with animation#

<button cngxDisclosure #group="cngxDisclosure" [controls]="'nav-items'">
  Settings
</button>
<div id="nav-items" [hidden]="!group.opened()" class="collapsible">
  <a href="/general">General</a>
  <a href="/security">Security</a>
</div>

https://cngxjs.github.io/cngx/examples/#/common/interactive/disclosure/basic-uncontrolled https://cngxjs.github.io/cngx/examples/#/common/interactive/disclosure/controlled-mode https://cngxjs.github.io/cngx/examples/#/common/interactive/disclosure/faq-accordion