Kendo UI for jQuery ExpansionPanel Overview

The Kendo UI ExpansionPanel control is a layout component that provides the user with an easy way to expand and collapse a content area within the application.

Kendo UI for jQuery Kendoka image

The ExpansionPanel is part of Kendo UI for jQuery, 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.

Initializing the ExpansionPanel

To initialize an ExpansionPanel, use a div element where its content will be used as a content for the ExpansionPanel.

The following example demonstrates how to initialize an expanded ExpansionPanel component.

<div id="brazil">
            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.
        </div>

    <script>
        $('#brazil').kendoExpansionPanel({
            title: 'Brazil',
            subTitle: 'South America',
            expanded: true
        });
    </script>

Referencing Existing Instances

To get a reference to an existing ExpansionPanel instance:

  1. Use the jQuery.data() method.
  2. Once a reference is established, use the ExpansionPanel API to control its behavior:

    var expansionpanel = $("#brazil").data("kendoExpansionPanel");
    

Functionality and Features

See Also

In this article