Disclosure

Allow the user to show or hide additional content about a topic

Overview #

Use the disclosure component to allow the user to show or hide additional content about a topic.

Examples #

Choose an example

<div class="rvt-disclosure" data-rvt-disclosure="disclosure-1">
  <button class="rvt-disclosure__toggle" data-rvt-disclosure-toggle aria-expanded="false">Take a look at the numbers</button>
  <div class="rvt-disclosure__content" data-rvt-disclosure-target hidden>
    <div class="rvt-prose rvt-flow">
      <p>Tuition and fees vary at each Indiana University campus. As you look at total costs, keep in mind that financial aid, scholarships and awards, a part-time job, and student loans can all factor into what you will pay for your degree.</p>
    </div>
  </div>
</div>

Elements #

Element	Description	Usage	Required	Multiple
Toggle	Button that shows/hides the associated content	Limit toggle button text to a short phrase	Toggle is required	Component may contain only one Toggle
Content	Content that is shown/hidden by the toggle button	Limit to a a few short sentences. Avoid complex formatting, images, or tables.	Content is required	Component may contain only one Content

Attributes #

Use the following attributes to configure a disclosure:

Attribute	Description
`data-rvt-disclosure-open-on-init`	Add to the root `data-rvt-disclosure` element to open the disclosure on page load
`data-rvt-close-click-outside`	Add to the root `data-rvt-disclosure` element to close the dialog when the user clicks anywhere outside of it

Usage #

Do

Use to hide lengthy information that is secondary or low priority
Use you need to conserve space in long passages of text
Use to reveal additional information about a topic

Don't

Use to hide critical or required instructions
Use to hide an element-use the .rvt-display-none or .rvt-sr-only utility classes instead
Group multiple disclosures together—use an accordion instead

Accessibility #

ARIA labels #

Label	Description
`aria-expanded`	Added to the `button` element with the `data-rvt-disclosure-toggle` attribute by the component’s JavaScript. Set to `true` if the disclosure is open; `false` otherwise.

Keys	Description
`enter` or `space`	Open the disclosure if focus is on the trigger button

JavaScript #

Method	Description
`open()`	Opens the disclosure
`close()`	Closes the disclosure

Event	Description	Detail object properties
`rvtDisclosureOpened`	Emitted when a disclosure is opened	—
`rvtDisclosureClosed`	Emitted when a disclosure is closed	—

Learn more about using Rivet JavaScript