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.
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:
- Use the
jQuery.data()method. -
Once a reference is established, use the ExpansionPanel API to control its behavior:
var expansionpanel = $("#brazil").data("kendoExpansionPanel");