Toggle

Toggle the visibility of content. Useful for something like an FAQ page, for example. Includes ARIA attributes for expandable content and is keyboard friendly.

Sourceopen in new window

Styled Example

Basic Usage

Label Slot

Sometimes just a text string won't do. For example, you may want to add icons or something.

Scoped Slots

You can access the open status through the scoped slots.

Events

update: fires on any change and provides the open status
open: fires on open.
close: fires on close.

Custom Classes

This component can accept a classes prop to customize the output HTML classes:

:classes="{ root: string, label: string, content: string }"

# Toggle

# Styled Example

# Basic Usage

# Label Slot

# Scoped Slots

# Events