Getting Started with the PanelBar
This guide demonstrates how to get up and running with the Kendo UI for jQuery PanelBar.
After the completion of this guide, you will achieve the following end result:
<ul id="panelbar">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$(() => {
$("#panelbar").kendoPanelBar({
expandMode: "single",
animation: {
// Fade-out closing items over 1000 milliseconds.
collapse: {
duration: 500,
effects: "fadeOut"
},
// Fade-in and expand opening items over 500 milliseconds.
expand: {
duration: 500,
effects: "expandVertical fadeIn"
}
}
});
});
</script>
1. Create an HTML List
First, create a <ul> element and fill it with li children.
<ul id="panelbar">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
2. Initialize the PanelBar
In this step, you'll initialize the PanelBar component from the <ul> element that you created earlier. Note that as the PanelBar has to be initialized after the DOM is loaded, you must create the component within a $(document).ready() statement.
$(() => {
$("#panelbar").kendoPanelBar({
});
});
3. Set the Expand Mode
The expandMode configuration enables you to specify if the user can expand multiple items at once or not.
$("#panelbar").kendoPanelBar({
expandMode: "single"
});
4. Configure the Animations
You can now configure the expand and collapse animations of the PanelBar component.
$("#panelbar").kendoPanelBar({
animation: {
collapse: {
duration: 500,
effects: "fadeOut"
},
expand: {
duration: 500,
effects: "expandVertical fadeIn"
}
}
});