A collection of visual animations used when PanelBar items are opened or closed through user interactions. Setting this option to false will disable all animations.

Example

$("#panelBar").kendoPanelBar({
    animation: {
        // fade-out closing items over 1000 milliseconds
        close: {
            duration: 1000,
            effects: "fadeOut"
        },
       // fade-in and expand opening items over 500 milliseconds
       open: {
           duration: 500,
           effects: "expandVertical fadeIn"
       }
   }
});

close: Object

The visual animation(s) that will be used when PanelBar items are closed.

Example

$("#panelBar").kendoPanelBar({
    animation: {
        close: {
            duration: 200,
            effects: "fadeOut"
        }
    }
});

duration: Number(default: 200)

The number of milliseconds used for the visual animation when a PanelBar item is closed.

Example

$("#panelBar").kendoPanelBar({
    animation: {
        close: {
                       duration: 1000
                   }
  }
});

effects: String

A whitespace-delimited string of animation effects that are utilized when a PanelBar item is closed. Options include "fadeOut".

Example

$("#panelBar").kendoPanelBar({
    animation: {
        close: {
            duration: 1000,
            effects: "fadeOut"
        }
    }
});

open: Object

The visual animation(s) that will be used when opening items.

Example

$("#panelBar").kendoPanelBar({
    animation: {
        open: {
            duration: 200,
            effects: "expandVertical"
        }
    }
});

duration: Number(default: 200)

The number of milliseconds used for the visual animation when an item is opened.

Example

$("#panelBar").kendoPanelBar({
 animation: {
      open: {
          duration: 1000
      }
   }
});

effects: String(default: "expandVertical")

A whitespace-delimited string of animation effects that are used when an item is expanded. Options include "expandVertical" and "fadeIn".

show: Boolean(default: true)

Specifies how the PanelBar items are displayed when opened and closed. The following values are available:

"single": Display one item at a time when an item is opened; opening an item will close the previously opened item.
"multiple": Display multiple values at one time; opening an item has no visual impact on any other items in the PanelBar.

Example

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