Customizing the PanelBar

There are a few options available to customize the behavior of the PanelBar widget. In this recipe, we will take a look at setting the expanded mode for the PanelBar widget and the animation effects that can be applied.

How to do it…

The PanelBar widget is designed so that it occupies less space on the page and, at the same time, shows you the necessary content. When you click on any of the list items in the PanelBar widget, it expands to show you the content. Now, when you click on the other list item, it would also expand to show its content. At this stage, there are two items in the PanelBar whose content is being shown. By setting the expandMode property to single, only one item in the list can remain in the expanded state at any given time:

$("#panelBar").kendoPanelBar({
     expandMode: 'single'
});

By default, the value of the expandMode property is multiple and hence the behavior mentioned earlier takes place.

Note

In case the expanded panel contains a nested list...