ExpansionPanel Overview

Telerik UI for ASP.NET MVC Ninja image

The ExpansionPanel is part of Telerik UI for ASP.NET MVC, 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 HtmlHelper is a server-side wrapper 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.")
     )

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

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

See Also

In this article