---
path: components/expansionpanel/overview
title: Overview
position: 1
seo_title: Overview of the ExpansionPanel Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  ExpansionPanel, explore its anatomy, and check out the available options in
  its live demo.
---
## 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

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel"},{"text":"jQuery","url":"https://demos.telerik.com/kendo-ui/expansionpanel/index"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/layout/expansionpanel"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/layout/expansionpanel"},{"text":"ASP.NET Core","url":"https://demos.telerik.com/aspnet-core/expansionpanel"},{"text":"ASP.NET MVC","url":"https://demos.telerik.com/aspnet-mvc/expansionpanel"}],"demo":"components/expansion-panel/overview"}'></LiveDemo>

### 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`&mdash;The hover state of an ExpansionPanel is applied when the user hovers over the component but does not click it. 
* `k-focus`&mdash;The focus state of the ExpansionPanel is triggered when the user navigates to the component by keyboard, voice, or mouse click. 
* `k-disabled`&mdash;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:

<BlueprintImage data='{"description":"","labels":[{"text":"ExpansionPanel header"},{"text":"ExpansionPanel content"},{"text":"Title"},{"text":"Subtitle"},{"text":"Expansion indicator icon"},{"text":"Expanded ExpansionPanel"},{"text":"Collapsed ExpansionPanel"}]}'>![Anatomy and elements of a Telerik and Kendo UI ExpansionPanel component including the header, content, title, subtitle, and indicator icon](images/components-expansionpanel-overview-anatomy.png "The Telerik and Kendo UI ExpansionPanel component and its elements")</BlueprintImage>

### Framework-Specific Documentation

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

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular ExpansionPanel ","description":"Find more information about the Kendo UI for Angular ExpansionPanel in the official product documentation of the component.","url":"https://www.telerik.com/kendo-angular-ui/components/layout/expansionpanel/"}'>![Kendo UI for Angular logo](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery ExpansionPanel ","description":"Find more information about the Kendo UI for jQuery ExpansionPanel in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/expansionpanel/overview"}'>![Kendo UI for jQuery logo](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact ExpansionPanel ","description":"Find more information about the KendoReact ExpansionPanel in the official product documentation of the component.","url":"https://www.telerik.com/kendo-react-ui/components/layout/expansionpanel/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue ExpansionPanel ","description":"Find more information about the Kendo UI for Vue ExpansionPanel in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/layout/expansionpanel/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core ExpansionPanel ","description":"Find more information about the Telerik UI for ASP.NET Core ExpansionPanel component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/layout/expansionpanel/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC ExpansionPanel ","description":"Find more information about the Telerik UI for ASP.NET MVC ExpansionPanel component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/layout/expansionpanel/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>