Disclosure

Purpose

A disclosure widget allows users to show or hide a single section of content with a toggle button. Use it for supplementary information, filter panels, or expandable details.

Usage Guidance

• A single disclosure replaces the need for an accordion
• The button label should describe the hidden content
• Consider whether the content should be visible by default

Accessibility Considerations

• The trigger must be a <button> with aria-expanded
• aria-controls on the button links it to the content panel
• The content panel uses the hidden attribute when collapsed

Keyboard Support

Screen Reader Behavior

Screen readers announce the button label, “button”, and “expanded/collapsed” state. Users navigate into the revealed panel normally when open.

ARIA Requirements

• aria-expanded="true|false" on the trigger <button>
• aria-controls="panel-id" on the trigger

Common Mistakes

• Using aria-expanded on a non-button element
• Forgetting to toggle the hidden attribute on the panel
• Using display:none via CSS instead of the hidden attribute (both work, but be consistent)

Live Example

Code Example

<button
  type="button"
  aria-expanded="false"
  aria-controls="disclosure-content"
  data-disclosure-trigger
>
  Show more information
</button>
<div id="disclosure-content" hidden>
  <!-- Content revealed when expanded -->
</div>

document.querySelectorAll('[data-disclosure-trigger]').forEach(function(btn) {
  var panel = document.getElementById(btn.getAttribute('aria-controls'));
  btn.addEventListener('click', function() {
    var expanded = btn.getAttribute('aria-expanded') === 'true';
    btn.setAttribute('aria-expanded', String(!expanded));
    panel.hidden = expanded;
  });
});