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 Telerik UI ExpansionPanel HtmlHelper for ASP.NET MVC is a layout component that provides the user with an easy way 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.")
            )

Referencing Existing Instances

The following example demonstrates how to get an instance of the ExpansionPanel.

    @(Html.Kendo().ExpansionPanel()
            .Name("brazil")
            .Title("Brazil")
            .SubTitle("South America")
            .Expanded(true)
            .Content("...")
            )

    <script type="text/javascript">
        $(function () {
            // The Name() of the ExpansionPanel is used to get its client-side instance.
            var expansionPanel = $("#brazil").data("kendoExpansionPanel");
            console.log(expansionPanel);
        });
    </script>

Functionality and Features

See Also

In this article