Disclosures

Disclosure controls reveal and hide information and functionality related to specific controls or views.

Disclosures modify the visibility of content elements. A single panel with a caret icon and a section label can be collapsed or expanded to reveal more information. Not extending the disclosure allows the user to skip over secondary content or features while being able to explore more content if they choose.

Disclosure or Accordion?

A disclosure organizes non-essential information, while an accordion is more effective to outline more significant information. A disclosure can be used when there is only one section. If more than one panel is needed, use an accordion instead.

Types

Option 1

See the Pen Disclosures by USANA UX (@usana_ux) on CodePen.

Guidelines

Anatomy

Label
Trigger (icon/button)
Content

Interaction

Disclosures can be collapsed and expanded to reveal and hide information, respectively. Users can preview the content inside by loading the page with its panel collapsed by default.

Specifications

The following specifications should be followed by designers and developers in order to make sure you have accurate and pixel-perfect disclosures.

Use heading markup for the details that reveals content underneath.
Make sure the disclosed content comes right after the trigger that discloses it.
Use a button element as a trigger for disclosure.

Don't

Make controls focused and or activated.
Think that they can activated by voice.