Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Scripts
  • Templates
  • Access control banner
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Disclosure button
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • Navigation with new logo v1
  • Navigation with new logo v2
  • Notes
  • Pagination
  • Pre-footer
  • Quote component
  • RSS
  • Table of contents
  • Tag list
  • Text component
  • Translations
  • Video component

Disclosure button

When included on a page, provided that JavaScript is available, the element directly following the button in the DOM is hidden from users. Pressing the button then toggles the display of that element. See it in action on the profile template.

Open this Disclosure button in a new tab

HTML:

<button type="button" class="button button--ghost" style="display:none;" data-toggle="true">Toggle content</button>

¶Considerations

Note the use of the inline style display: none; and the data attribute data-toggle="true" on the button. This data attribute is targeted by JavaScript for adding the hide/show functionality. In the absence of JavaScript the button remains hidden to users and the element directly following the button is expanded by default.

When used on the profile template, a CSS media query hides the button when the viewport size is at least 1024px wide, and the element directly following the button (in this case navigation) is fully displayed in a sidebar.

Copyright © 2025 W3C - generated 10 Jan 2025, 12:43:28 UTC

Feedback is welcome and can be submitted as a GitHub issue.