Disclosure element

In HTML and UX, the disclosure element refers to a component or pattern used to show and hide additional content or information within a webpage or user interface. It allows users to expand or collapse sections of content, providing a more compact and manageable display.

The disclosure element typically consists of a clickable control, such as a button or arrow, that toggles the visibility of the hidden content. When the control is clicked, the associated content expands or collapses, revealing or hiding additional details, options, or related information.

Working example

Show additional components
  • Alerts for dismissing
  • Buttons for toggling states and checkbox/radio functionality
  • Carousel for all slide behaviors, controls, and indicators
  • Collapse for toggling visibility of content
  • Dropdowns for displaying and positioning (also requires Popper)
  • Modals for displaying, positioning, and scroll behavior
  • Navbar for extending our Collapse plugin to implement responsive behavior
  • Toasts for displaying and dismissing
  • Tooltips and popovers for displaying and positioning (also requires Popper)
  • Scrollspy for scroll behavior and navigation updates
What is a "details" element

There is a secret hidden in plain sight, the details tag The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary element.

How details work?

By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.