Expansion Panel

The ExpansionPanel 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.

info

For more details about Vuetify’s usage of ExpansionPanel component, click ExpansionPanel page.
For more prop explanations, click Vuetify ExpansionPanel API page.

Props

Name	Description	Type	Default
activeClass	The active-class applied to children when they are activated.	string	'v-item--active'
class	Prop that determines the class to add to the menu.	string	‘container container–fluid’
disabled	Disables the entire expansion-panel.	boolean	false
readonly	Makes the entire expansion-panel read only.	boolean	false
visible	Visibility of ExpansionPanel component.	boolean	true

Events

Attribute		Description
change		Toggles the value of the selected panel
click		Mouse click event
click:outside		Event that fires when clicking outside an active dialog. MouseEvent
keydown		Event that fires when key is pressed. If dialog is active and not using the persistent prop, the esc key will deactivate it. KeyboardEvent

Samples Component

Sample Page

Accordion

CustomIcon

Disabled and Readonly

Focusable

Inset

Popout

Creating an Expansion Panel using the createComponent method

createExpansionPanel.qjson

Samples Qjson

Expansion_Panels
ExpansionPanel_UsageAndProps