ExpansionPanel Overview

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.

• Demo page for the ExpansionPanel HtmlHelper

• Demo page for the ExpansionPanel TagHelper

Initializing the ExpansionPanel

The following example demonstrates how to define the ExpansionPanel.

Razor

    @(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.")
     )

Razor

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

Razor

    @(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.")
     )

Razor

	<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() and Complete() 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)

See Also

• Using the API of the ExpansionPanel for ASP.NET Core (Demo)
• Knowledge Base Section