disclosure
HTML-first disclosure state and trigger/panel relationships
Native details and summary own click, keyboard, focus, and disclosure state.
AngularCSS only styles the authored structure. AngularTS may observe native
events when the application needs the state.
<details class="disclosure">
<summary>Order details</summary>
<div>Shipping address and item details.</div>
</details>
Example
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Disclosure</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="disclosure-demo">
<details class="disclosure visual-example">
<summary>
<header>
<h2>Order #4189</h2>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="m7 15 5 5 5-5M7 9l5-5 5 5" />
</svg>
<span class="visually-hidden">Toggle details</span>
</header>
<p><span>Status</span><strong>Shipped</strong></p>
</summary>
<section>
<article>
<p><strong>Shipping address</strong></p>
<p>100 Market St, San Francisco</p>
</article>
<article>
<p><strong>Items</strong></p>
<p>2x Studio Headphones</p>
</article>
</section>
</details>
</body>
</html>
Basic, settings, and RTL
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Disclosure Workflows</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body
ng-app="angular.css"
ng-cloak
data-example="disclosure-basic disclosure-rtl disclosure-settings"
>
<main class="disclosure-workflow-grid" aria-label="Disclosure workflows">
<section
class="disclosure-workflow"
aria-labelledby="disclosure-basic-heading"
>
<h2 id="disclosure-basic-heading">Basic</h2>
<div class="disclosure-basic-card card">
<section>
<details class="disclosure disclosure-product">
<summary>
<span>Product details</span>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="m6 9 6 6 6-6" />
</svg>
</summary>
<div>
<p>
This panel can be expanded or collapsed to reveal additional
content.
</p>
<button size="xs">Learn More</button>
</div>
</details>
</section>
</div>
</section>
<section
class="disclosure-workflow"
aria-labelledby="disclosure-settings-heading"
>
<h2 id="disclosure-settings-heading">Settings</h2>
<div size="sm" class="disclosure-settings-card card">
<header>
<h2>Radius</h2>
<p>Set the corner radius of the element.</p>
</header>
<section>
<section class="disclosure-settings">
<div class="disclosure-settings-fields">
<label class="visually-hidden" for="radius-x">Radius X</label>
<input id="radius-x" type="number" value="0" />
<label class="visually-hidden" for="radius-y">Radius Y</label>
<input id="radius-y" type="number" value="0" />
<details class="disclosure disclosure-settings-disclosure">
<summary aria-label="Toggle additional radius settings">
<svg
class="disclosure-maximize"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<path
d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3"
/>
</svg>
<svg
class="disclosure-minimize"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<path
d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3M3 16h3a2 2 0 0 1 2 2v3m8 0v-3a2 2 0 0 1 2-2h3"
/>
</svg>
</summary>
<div class="disclosure-settings-more">
<label class="visually-hidden" for="radius-bottom-x"
>Bottom radius X</label
>
<input id="radius-bottom-x" type="number" value="0" />
<label class="visually-hidden" for="radius-bottom-y"
>Bottom radius Y</label
>
<input id="radius-bottom-y" type="number" value="0" />
</div>
</details>
</div>
</section>
</section>
</div>
</section>
<section
class="disclosure-workflow disclosure-workflow-wide"
aria-labelledby="disclosure-rtl-heading"
dir="rtl"
lang="ar"
>
<h2 id="disclosure-rtl-heading">من اليمين إلى اليسار</h2>
<details class="disclosure">
<summary>
<header>
<h4>الطلب #4189</h4>
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="m7 15 5 5 5-5M7 9l5-5 5 5" />
</svg>
<span class="visually-hidden">تبديل التفاصيل</span>
</header>
<p><span>الحالة</span><strong>تم الشحن</strong></p>
</summary>
<section>
<article>
<p><strong>عنوان الشحن</strong></p>
<p>100 Market St, San Francisco</p>
</article>
<article>
<p><strong>العناصر</strong></p>
<p>2x سماعات الاستوديو</p>
</article>
</section>
</details>
</section>
</main>
</body>
</html>
File tree
View source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AngularCSS Disclosure Compositions</title>
<link rel="stylesheet" href="../../css/preflight.css" />
<link rel="stylesheet" href="../../css/angular.css" />
<link rel="stylesheet" href="../example.css" />
<script src="../../js/angular-ts.umd.js"></script>
<script src="../../js/angular-css.umd.js"></script>
</head>
<body ng-app="angular.css" ng-cloak data-example="disclosure-file-tree">
<main aria-label="Disclosure file tree composition">
<div size="sm" class="disclosure-file-card visual-example card">
<header>
<section ng-tabs>
<menu aria-label="File views">
<button aria-selected="true">Explorer</button>
<button>Outline</button>
</menu>
<section>
<span class="visually-hidden">Explorer file tree</span>
</section>
<section>
<span class="visually-hidden">No outline available</span>
</section>
</section>
</header>
<section>
<div class="disclosure-file-tree">
<details class="disclosure">
<summary>
<svg
class="tree-chevron"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" /></svg
><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
/></svg
><span>components</span>
</summary>
<div>
<details class="disclosure">
<summary>
<svg
class="tree-chevron"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" /></svg
><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
/></svg
><span>ui</span>
</summary>
<div>
<button variant="link" size="sm">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
/>
<path d="M14 2v6h6" /></svg
>button.tsx
</button>
<button variant="link" size="sm">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
/>
<path d="M14 2v6h6" /></svg
>card.tsx
</button>
<button variant="link" size="sm">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
/>
<path d="M14 2v6h6" /></svg
>dialog.tsx
</button>
<button variant="link" size="sm">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
/>
<path d="M14 2v6h6" /></svg
>input.tsx
</button>
<button variant="link" size="sm">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
/>
<path d="M14 2v6h6" /></svg
>select.tsx
</button>
<button variant="link" size="sm">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
/>
<path d="M14 2v6h6" /></svg
>table.tsx
</button>
</div>
</details>
<button variant="link" size="sm">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
/>
<path d="M14 2v6h6" /></svg
>login-form.tsx
</button>
<button variant="link" size="sm">
<svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z"
/>
<path d="M14 2v6h6" /></svg
>register-form.tsx
</button>
</div>
</details>
<details class="disclosure">
<summary>
<svg
class="tree-chevron"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" /></svg
><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
/></svg
><span>lib</span>
</summary>
<div>
<button variant="link" size="sm">utils.ts</button
><button variant="link" size="sm">cn.ts</button
><button variant="link" size="sm">api.ts</button>
</div>
</details>
<details class="disclosure">
<summary>
<svg
class="tree-chevron"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" /></svg
><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
/></svg
><span>hooks</span>
</summary>
<div>
<button variant="link" size="sm">use-media-query.ts</button
><button variant="link" size="sm">use-debounce.ts</button
><button variant="link" size="sm">use-local-storage.ts</button>
</div>
</details>
<details class="disclosure">
<summary>
<svg
class="tree-chevron"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" /></svg
><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
/></svg
><span>types</span>
</summary>
<div>
<button variant="link" size="sm">index.d.ts</button
><button variant="link" size="sm">api.d.ts</button>
</div>
</details>
<details class="disclosure">
<summary>
<svg
class="tree-chevron"
viewBox="0 0 24 24"
fill="none"
aria-hidden="true"
>
<path d="m9 18 6-6-6-6" /></svg
><svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path
d="M4 19V5a2 2 0 0 1 2-2h5l2 3h5a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2Z"
/></svg
><span>public</span>
</summary>
<div>
<button variant="link" size="sm">favicon.ico</button
><button variant="link" size="sm">logo.svg</button
><button variant="link" size="sm">images</button>
</div>
</details>
<button variant="link" size="sm">app.tsx</button>
<button variant="link" size="sm">layout.tsx</button>
<button variant="link" size="sm">globals.css</button>
<button variant="link" size="sm">package.json</button>
<button variant="link" size="sm">tsconfig.json</button>
<button variant="link" size="sm">README.md</button>
<button variant="link" size="sm">.gitignore</button>
</div>
</section>
</div>
</main>
</body>
</html>
Installation
Load the AngularCSS stylesheet. This entry needs no AngularCSS JavaScript or angular.css module dependency. Add AngularTS when using application bindings such as ng-model or ng-click. See Installation for the complete setup.
This entry uses native HTML and CSS. AngularCSS registers no runtime directive for it. Native details and summary disclosure.
Anatomy
Root styling selector
.disclosure
Semantic structure
Apply .disclosure to a native details element with a direct summary followed by authored content. No nested AngularCSS attributes are required.
API
Attributes and state
| Attribute | Access | Purpose |
|---|---|---|
open | Authored | Initial or controlled open state. |
Attributes remain authored HTML, native state, or AngularTS inputs. AngularCSS does not write element state.
CSS custom properties
This styling hook does not define component-specific CSS custom properties.
DOM events
This component does not emit a component-specific custom event.
Native DOM events continue to work normally. AngularTS event directives such as
ng-click and ng-keydown, plus the data-change model callback, remain application-owned.
Behavior
Native details and summary own disclosure, focus, and keyboard behavior. Use open for initial state and AngularTS only when application state must observe or control the native element. AngularCSS registers no disclosure directive.
AngularCSS does not replace AngularTS interpolation, bindings, structural directives, form controllers, validation, or application state.
Accessibility
Use a direct summary as the accessible trigger. The browser exposes disclosure state and provides Enter and Space activation without authored roles or ARIA state.
Authored accessible names and relationships are preserved. Test the final composition with keyboard navigation and assistive technology because labels and content come from the application.
Customization
Target semantic elements, native state selectors, and component classes with ordinary CSS. Behavior and accessible state remain with native HTML and AngularTS; visual choices belong in the application stylesheet.
Read Customization for layer order, design tokens, state variants, and iframe demo isolation.
Feedback
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.