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

If the script didn’t run, this content would have just been hanging out there for you to read.

<disclosure-block>
  <disclosure-content>
    ...
  </disclosure-content>
</disclosure-block>

disclosure-block

If the script didn’t run, this content would have just been hanging out there for you to read.

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>

If the script didn’t run, this content would have just been hanging out there for you to read.

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>