ExpansionPanel Overview
The ExpansionPanel is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI ExpansionPanel TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI ExpansionPanel widget.
The ExpansionPanel is a layout component that allows the user to expand and collapse a content area within the application.
Initializing the ExpansionPanel
The following example demonstrates how to define the ExpansionPanel.
@(Html.Kendo().ExpansionPanel()
.Name("brazil")
.Title("Brazil")
.SubTitle("South America")
.Expanded(true)
.Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
)
<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true">
<content>
The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
</content>
</kendo-expansionpanel>
Basic Configuration
The following example showcases a basic configuration of the ExpansionPanel with specified visual animations used when the user expands or collapses the component.
@(Html.Kendo().ExpansionPanel()
.Name("brazil")
.Title("Brazil")
.SubTitle("South America")
.Expanded(true)
.Animation(animation =>
{
animation.Expand(expand => expand.Effects("expandVertical fadeIn").Duration(500));
animation.Collapse(collapse => collapse.Effects("fadeOut").Duration(1000));
})
.Content("The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.")
)
<kendo-expansionpanel name="brazil" title="Brazil" sub-title="South America" expanded="true">
<animation>
<collapse enabled="true" effects="fadeOut" duration="1000"/>
<expand enabled="true" effects="expandVertical fadeIn" duration="500"/>
</animation>
<content>
The word 'Brazil' likely comes from the Portuguese word for brazilwood, a tree that once grew plentifully along the Brazilian coast. In Portuguese, brazilwood is called pau-brasil, with the word brasil commonly given the etymology 'red like an ember', formed from brasa ('ember') and the suffix -il (from -iculum or -ilium). As brazilwood produces a deep red dye, it was highly valued by the European textile industry and was the earliest commercially exploited product from Brazil.
</content>
</kendo-expansionpanel>
Functionality and Features
- Default State—The ExpansionPanel supports various states.
-
Events—The component exposes the
Expand(),Collapse()andComplete()events that allow you to control its behavior. - Keyboard Navigation—You can navigate through the ExpansionPanel elements with the keyboard.
Next Steps
- Getting Started with the ExpansionPanel
Basic Usage of the ExpansionPanel HtmlHelper for ASP.NET Core (Demo)
Basic Usage of the ExpansionPanel TagHelper for ASP.NET Core (Demo)