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

Animation.expand

configuration

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

animation.expand

Object

<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({
        animation: {
            expand: {
                duration: 200,
                effects: "expandVertical"
            }
        }
    });
</script>

animation.expand.duration

Number

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

Default: 200

<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({
     animation: {
          expand: {
              duration: 1000
          }
       }
    });
</script>

animation.expand.effects

String

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

Default: "expandVertical"

<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({
        animation: {
            expand: {
                effects: "expandVertical"
            }
        }
    });
</script>