Standard disclosure widgets
Use either disclosure-inline (for display: inline-block) or
disclosure-block (for display: block) custom elements as the wrappers.
Either wrapping element must contain a <disclosure-content> element.
This element represents the content you want to show/hide.
A trigger (<button> element) will be auto-generated with the fallback text of "More info".
<disclosure-inline>
<disclosure-content>
...
</disclosure-content>
</disclosure-inline>disclosure-inline
<disclosure-block>
<disclosure-content>
...
</disclosure-content>
</disclosure-block>disclosure-block
Give your triggers unique labels
Use the data-trigger attribute on the disclosure parent element to specify a name for
the auto-generated trigger (<button> element).
<disclosure-inline
data-trigger="My Name!!!">
...
</disclosure-inline>
Adjust the down arrow position
Use the data-left-align attribute to have the down arrow / chevron appear prior to the trigger's visible label.
Identify where to generate the trigger
Maybe you need more flexibility on where your disclosure widget trigger is generated.
Use the data-insert-trigger attribute to override the default placement,
and instead inject the trigger into that particular element.
This text exists as the first child element of the disclosure-block.
Following this paragraph is a <div data-insert-trigger>.
The trigger will be injected into that element.
As another example, what follows is a nested disclosure widget, but its trigger
has been disabled by default (using the data-disabled attribute on
the parent <disclosure-inline> element).
This link is here just for focus testing.
Hey! You weren't supposed to get to me...
Make it 'pop'
Use the data-popup attribute to have the disclosure widget content absolutely positioned.
The popup content will allow for keyboard focus to enter it and interact with the content.
Tabbing away will close the disclosure widget. The Esc key will also close the disclosure widget
when keyboard focus is on the trigger, or within the disclosure widget's content panel.
<disclosure-inline data-popup>
<disclosure-content role=note>
...
</disclosure-content>
</disclosure-inline>I have a role=note. You don't have to add this, but if you'd like to learn more about this role, check out the ARIA specification.
Inject a trigger into a heading
The following are some examples of ways to have a disclosure widget trigger within a heading. The first of which is a button as a sibling to the heading's text.
The second example is a button that takes the entirety of the heading's content and includes it as child content of the injected button element. Make sure you use this with caution, as you don't want links or other interactive elements as child elements to the injected button.
<disclosure-inline>
<h5>
Heading with adjacent toggle
<span data-insert-trigger="inline"></span>
</h5>
<disclosure-content>
...
</disclosure-content>
</disclosure-inline>Heading with adjacent toggle
Sometimes you don't want your full heading to be clickable. Sometimes.
<disclosure-block data-open>
<h5 data-insert-trigger>
<img src=... alt style=...>
<span style=...>...</span>
</h5>
<disclosure-content>
...
</disclosure-content>
</disclosure-block>Disclosure button within a heading
This disclosure widget is opened by default. Because that's a thing that should be able to happen.
Here's an example of a nested popup disclosure widget:
This example has a link within it.
popups can be closed via the Esc key, as
long as focus is on the <button> or within
the revealed content.
popups will auto-close if focus leaves the popup.