Standard disclosure widgets
display: inline-block) or
display: block) custom elements as the wrappers.
Either wrapping element must contain a
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-block> <disclosure-content> ... </disclosure-content> </disclosure-block>
Give your triggers unique labels
data-trigger attribute on the disclosure parent element to specify a name for
the auto-generated trigger (
<disclosure-inline data-trigger="My Name!!!"> ... </disclosure-inline>
Adjust the down arrow position
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.
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
Following this paragraph is a
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
Hey! You weren't supposed to get to me...
Make it 'pop'
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.