# Expansion panels

The v-expansion-panel component is useful for reducing vertical space with large amounts of information. The default functionality of the component is to only display one expansion-panel body at a time; however, with the multiple property, the expansion-panel can remain open until explicitly closed.

# Usage

Expansion panels in their simplest form display a list of expandable items.


# Examples

# Props

# Accordion

accordion expansion-panel hasn’t got margins around active panel.

# Disabled

Both the expansion-panel and its content can be disabled using the disabled prop.

# Focusable

The expansion-panel headers can be made focusable with the prop focusable.

# Inset

inset expansion-panel becomes smaller when activated.

# Model

Expansion panels can be controlled externally by modifying the v-model. Its value corresponds to a zero-based index of the currently opened expansion panel content. If multiple prop is used then it is an array containing the indices of the open items.

# Popout

The expansion-panel also has popout design. With it, expansion-panel is enlarged when activated.

# Readonly

readonly prop does the same thing as disabled, but it doesn’t touch styles.

# Misc

# Advanced

The expansion panel component provides a rich playground to build truly advanced implementations. Here we take advantage of slots in the v-expansion-panel-header component to react to the state of being open or closed by fading content in and out.

# Custom icon

Expand action icon can be customized with expand-icon prop or the actions slot.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.