Disclosure
Expandable content built on details and summary with no runtime behavior layer.
Canonical sourcepatterns/disclosure.html
Behavior ownerNative HTML
Runtime inside FormaNone
Example 1
Canonical
Canonical repository markup, namespaced only to keep examples independent.
Advanced options
Additional controls or explanatory content go here.
View HTML
<details class="ef-disclosure">
<summary>Advanced options</summary>
<div class="ef-disclosure__content">
<p>Additional controls or explanatory content go here.</p>
</div>
</details>Example 2
Representative state
A browser-native state made visible without adding a runtime.
Advanced options
Additional controls or explanatory content go here.
View HTML
<details open class="ef-disclosure">
<summary>Advanced options</summary>
<div class="ef-disclosure__content">
<p>Additional controls or explanatory content go here.</p>
</div>
</details>Example 3
Constrained layout
The canonical contract inside a narrow application region.
Advanced options
Additional controls or explanatory content go here.
View HTML
<details class="ef-disclosure">
<summary>Advanced options</summary>
<div class="ef-disclosure__content">
<p>Additional controls or explanatory content go here.</p>
</div>
</details>