5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Disclosure

A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.

The <el-disclosure> component provides a simple, accessible way to show and hide content — ideal for building things like toggleable accordion panels or expandable sections.

Component API

<el-disclosure>

Contains the content of the disclosure.

Attributes
`hidden`	Whether the disclosure is initially hidden (closed).
`open`	Automatically synced with the `hidden` attribute.
Data attributes (Read-only)
`data-closed`	Present before transitioning in, and when transitioning out.
`data-enter`	Present when transitioning in.
`data-leave`	Present when transitioning out.
`data-transition`	Present when transitioning in or out.
Methods
`show()`	Shows the disclosure.
`hide()`	Hides the disclosure.
`toggle()`	Toggles the disclosure.
Commands
`--show`	Shows the disclosure.
`--hide`	Hides the disclosure.
`--toggle`	Toggles the disclosure.

<button>

A button that triggers the disclosure when clicked.

ARIA attributes (Read-only)
`aria-expanded`	Set to "true" when the disclosure is open, "false" when closed.