New to Telerik UI for ASP.NET MVC? Download 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 Expand and Collapse configuration options. You can also configure the PanelBar to render a single opened panel at a time.

The following example demonstrates how to configure the PanelBar animation:

@(Html.Kendo().PanelBar()
    .Name("panelbar")
    .Animation(animation =>
    {
        animation.Enable(true);
        animation.Expand(config =>
        {
            config.Expand();
            config.Fade(FadeDirection.In);
            config.Duration(AnimationDuration.Slow);
            config.Zoom(ZoomDirection.In);
        })
        .Collapse(config =>
         {
             config.Fade(FadeDirection.Out);
             config.Duration(AnimationDuration.Fast);
         });
    })
    .Items(panelbar =>
    {
        // add panelbar items
    })
    )
In this article
Not finding the help you need? Improve this article