logo x-n ui

Disclosure (Accordion)

A simple, accessible foundation for building custom UIs that show and hide content, like togglable accordion panels.

Basic example

Disclosures are built using the x-disclosure, x-disclosure:toggle and x-disclosure:panel components.

The button will automatically open/close the panel when clicked, and all components will receive the appropriate aria-* related attributes like aria-expanded and aria-controls. 

<div x-disclosure>
    <div>
        <button x-disclosure:toggle>
            Item 1
        </button>
        <div x-disclosure:panel>
            Content for item 1
        </div>
    </div>
    <div>
        <button x-disclosure:toggle>
            Item 2
        </button>
        <div x-disclosure:panel>
            Content for item 2
        </div>
    </div>
</div>

Options

Options can be passed as a block or individually using the x-nui directive.

Be sure to change the case type of the option name from "camelCase" to "kebab-case" when passing the options individually.

In block

<div x-nui="{expose:'data'}"></div>

Individually

<div x-nui:expose="data"></div>
name type default description
expose null,string null Exposes the component api. Receives the name of the variable where the component api will be exposed

Note: only applicable individually

name type default description
target string Is the id (only valid within the component) of the target panel. If not set, the element immediately after the one specified in its parent's child list nextElementSibling will be taken.

Note: only applicable individually

name type default description
id string Is a unique identifier within the component associated with toggle
open string When present, it specifies that the panel should be visible (open) to the user.

API Component

The component API is an object that contains the following properties:

name type description
main element Element where it is found: x-disclosure
active null,element Currently open panel element
items object[] Elements of toggles and panels associated like this: {toggle:element,panel:element}

Class Names

CSS classes that are added to describe a state.

name description
show Set to x-disclosure:toggle and x-disclosure:panel when is visible.