Disclosure

Disclosures are expandable areas of content that are summarized or otherwise labeled to indicate what they relate to. There is a trigger that must be manually selected which allows the user to show and hide the additional content that is available.

Code

Certara UI

Click the component to disclose its content.

The hidden content that is now shown.

Toggle dark mode

<certara-disclosure summary="Label">
  The hidden content that is now shown.
</certara-disclosure>

certara-disclosure

Properties

Property	Attribute	Description	Type	Default
arrowEnd	arrow-end	Disclosure arrow will show at the end of the content	boolean	false
hasPadding	has-padding	Content is padded to be flush with the opener	boolean	false
open	open	Hidden content will be visible	boolean	false
summary	summary	Visible label of the disclosure control	string	undefined

Slots

Slot	Description
	Content hidden by the disclosure goes in the main slot
"custom-summary"	Slot available if summary requires custom formatting

---

Open

Disclosure can be set to be open by default

Toggle dark mode

<certara-disclosure summary="Open" open>
  Disclosure can be set to be open by default
</certara-disclosure>

Arrow at end

The disclosure arrow shows at the end of the opener

Toggle dark mode

<certara-disclosure summary="Arrow at end" arrow-end>
  The disclosure arrow shows at the end of the opener
</certara-disclosure>

Has padding

Content is padded to be flush with the opener

Toggle dark mode

<certara-disclosure summary="Has padding" has-padding>
  Content is padded to be flush with the opener
</certara-disclosure>

Custom summary

Custom summary

More complex formatting is available within a slot="custom-summary" element

Toggle dark mode

<certara-disclosure>
  <div slot="custom-summary">
    <h3><certara-icon name="bell" role="presentation"></certara-icon> Custom summary</h3>
  </div>
  More complex formatting is available within a <code>slot="custom-summary"</code> element
</certara-disclosure>

HTML

Click the component to disclose its content.

Label

The hidden content that is now shown.

Toggle dark mode

<details class="details-arrow">
  <summary>Label</summary>
  The hidden content that is now shown.
</details>

In Practice

The Disclosure component simplifies the user experience by revealing interfaces upon request. It combines inline and block layout components to improve readability, allowing users to easily scan and comprehend the content for a better overall experience.

• Disclosures have two main parts:
  • The trigger that opens and closes the related content.
  • The container that displays the disclosed content.
• The disclosed content may include interactive elements.
• Disclosures are collapsed by default. However, the default state can be changed if needed.
• More than one disclosure item can be expanded at one time.

Accessibility

• Disclosure triggers are keyboard operable.
• The Disclosure is a native browser control and does not require additional JS.
• For more information, see our accessibility guidelines.

W3C guidelines for accessible disclosure UI

Design resources

View component in Figma