New to Kendo UI for jQuery? Start a free 30-day trial

Animations

By default, the PanelBar uses animations to expand and reveal its subitems when an item header is clicked.

You can modify these animations through the open and close animation properties. You can also configure the PanelBar to render a single opened panel at a time.

The following example demonstrates how to change the PanelBar animation and its expandMode behavior.

html

<ul id="panelbar"></ul>

<script>
    $("#panelBar").kendoPanelBar({
        animation: {
            open : { effects: "fadeIn" }
        },
        expandMode: "single"
    });
</script>

Animations

See Also