ExpansionPanel

ExpansionPanel Overview

The ExpansionPanel is a versatile UI component commonly used in web and application design. It facilitates the display of content in expandable panels that the user can expand or collapse to show or hide additional information, options, or details. These panels consist of a header that includes a title, a subtitle, and an expansion indicator icon that shows the state of the panel. They are also accompanied by a content area that becomes visible or hidden depending on whether the area is expanded or collapsed.

Live Demo

States

Depending on the action you want to imply through its appearance, the Telerik and Kendo UI ExpansionPanel can acquire the following states which you can set by using the following classes:

• An ExpansionPanel in its normal state appears usable and clickable.
• k-hover—The hover state of an ExpansionPanel is applied when the user hovers over the component but does not click it.
• k-focus—The focus state of the ExpansionPanel is triggered when the user navigates to the component by keyboard, voice, or mouse click.
• k-disabled—The disabled state indicates that an ExpansionPanel is temporarily unclickable and users cannot interact with it. To indicate that they are unavailable, ExpansionPanels in their disabled state appear faded and slightly out of focus.

Anatomy

The anatomy of the ExpansionPanel summarizes the elements of the component:

1. ExpansionPanel header
2. ExpansionPanel content
3. Title
4. Subtitle
5. Expansion indicator icon
6. Expanded ExpansionPanel
7. Collapsed ExpansionPanel

Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

Kendo UI for Angular ExpansionPanel Find more information about the Kendo UI for Angular ExpansionPanel in the official product documentation of the component.

Kendo UI for jQuery ExpansionPanel Find more information about the Kendo UI for jQuery ExpansionPanel in the official product documentation of the component.

KendoReact ExpansionPanel Find more information about the KendoReact ExpansionPanel in the official product documentation of the component.

Kendo UI for Vue ExpansionPanel Find more information about the Kendo UI for Vue ExpansionPanel in the official product documentation of the component.

Telerik UI for ASP.NET Core ExpansionPanel Find more information about the Telerik UI for ASP.NET Core ExpansionPanel component.

Telerik UI for ASP.NET MVC ExpansionPanel Find more information about the Telerik UI for ASP.NET MVC ExpansionPanel component.