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.
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. |
Examples
Basic example
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Opening a disclosure
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Closing a disclosure
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Toggling a disclosure
To view the complete documentation, you must own a Tailwind Plus license and be signed in.
Adding transitions
To view the complete documentation, you must own a Tailwind Plus license and be signed in.