Collapse

#

Toggles the visibility of content.

Default usage of the va-collapse component.

You can add an icon to the header.

Use two color schemes.

While customizing header, don't forget to v-bind attrs from slot argument for accessibility. Use value argument to change the look.

You can make own icon and place it anywhere and apply iconAttrs on it.

The component itself has a role button for header, and role heading for each header's wrapping element. The header's attribute aria-expand is set to true when its content is visible, and to false when the content is invisible. Header also has aria-controls to identify element contents that are being controlled. aria-disabled depends on disabled property.