Disclosure

A commercial license is required to use Tailwind Plus Elements.

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

Use the <el-disclosure> component, along with a native <button>, to build a disclosure:

<button command="--toggle" commandfor="my-disclosure" type="button">
  What's the best thing about Switzerland?
</button>

<el-disclosure hidden id="my-disclosure">
  I don't know, but the flag is a big plus.
</el-disclosure>

Opening a disclosure

You can open disclosures using the --show invoker command:

<button command="--show" commandfor="my-disclosure" type="button">
  Show disclosure
</button>

<el-disclosure hidden id="my-disclosure">
  <!-- ... -->
</el-disclosure>

Alternatively you can remove the hidden attribute to open it:

- <el-disclosure hidden>
+ <el-disclosure>
    <!-- ... -->
  </el-disclosure>

You can also programmatically open disclosures using the show() method:

<el-disclosure hidden id="my-disclosure">
  <!-- ... -->
</el-disclosure>

<script type="module">
  const disclosure = document.getElementById('my-disclosure');
  disclosure.show();
</script>

Closing a disclosure

You can close disclosures using the --hide invoker command:

<button command="--hide" commandfor="my-disclosure" type="button">
  Hide disclosure
</button>

<el-disclosure id="my-disclosure">
  <!-- ... -->
</el-disclosure>

Alternatively you can add the hidden attribute to close it:

- <el-disclosure>
+ <el-disclosure hidden>
    <!-- ... -->
  </el-disclosure>

You can also programmatically close disclosures using the hide() method:

<el-disclosure id="my-disclosure">
  <!-- ... -->
</el-disclosure>

<script type="module">
  const disclosure = document.getElementById('my-disclosure');
  disclosure.hide();
</script>

Toggling a disclosure

You can toggle disclosures using the --toggle invoker command:

<button command="--toggle" commandfor="my-disclosure" type="button">
  Toggle disclosure
</button>

<el-disclosure hidden id="my-disclosure">
  <!-- ... -->
</el-disclosure>

You can also programmatically toggle disclosures using the toggle() method:

<el-disclosure hidden id="my-disclosure">
  <!-- ... -->
</el-disclosure>

<script type="module">
  const disclosure = document.getElementById('my-disclosure');
  disclosure.toggle();
</script>

Adding transitions

To animate the opening and closing of the disclosure, target the data-closed, data-enter, data-leave, and data-transition attributes with CSS to style the different stages of the transition:

<el-disclosure hidden class="transition transition-discrete duration-1000 data-closed:opacity-0">
  <!-- ... -->
</el-disclosure>

Getting started

Elements