Accordion - Animation

Animation

Animation with Easing

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Second

Third

Disabled Animation

First

Second

Third

Custom Animation

This sample demonstrates how to use different animation effects with the C1Accordion control.

The Animated property is used in order to change the animation effect.

For the first accordion, the Animated.Effect property is set to "easeInOutCirc" in order to change easing effect.

For the second accordion, the Animated-Disabled property is set to True and animation is disabled.

For the third accordion, we are using our own custom animation effect. The Animated.Effect property is set to "custom1". Please, note that the "custom1" effect is defined using client-side script as follows:

	$(document).ready(function () {
		jQuery.wijmo.wijaccordion.animations.custom1 = function (options) {
			this.slide(options, {
				easing: options.down ? "easeOutBounce" : "swing",
				duration: options.down ? 1000 : 200
			});
		}
	});

Available options(options parameter) for the animation function include:

down - If True, this indicates that the index of the pane should be expanded higher than the index of the pane that must be collapsed.
horizontal - If True, this indicates that the accordion has a horizontal orientation (when the expandDirection is left or right).
rightToLeft - If True, this indicates that the content element is located before the header element (top and left expand direction).
toShow - jQuery object that contains the content element(s) that should be shown.
toHide - jQuery object that contains the content element(s) that should be hidden.