Applying Animation to the Accordion

In This Topic

The C1Accordion control supports animation. Simply set the Animated Effect property to take advantage of this feature.

Possible effects include the following:

easeOutElastic	easeInOutQuad	easeInQuint
easeInElastic	easeOutSine	easeInOutQuint
easeInOutElastic	easeInSine	easeOutBack
easeOutBounce	easeInOutSine	easeInBack
easeInBounce	easeOutCirc	easeInOutBack
easeInOutBounce	easeInCirc	easeOutQuart
easeOutExpo	easeInOutCirc	easeInQuart
easeInExpo	easeOutCubic	easeInOutQuart
easeInOutExpo	easeInCubic	easeLinear
easeOutQuad	easeInOutCubic	-
easeInQuad	easeOutQuint	-

Design Time

Select View | Properties Window.
Expand theAnimated property and enter one of the effects in the previous table next to the Effect property, for example, easeInOutBounce.

In Code

Add the following code to the Page_Load event, for example, to set the Animated property.

Visual Basic	Copy Code
C1Accordion1.Animated.Effect = "easeInOutBounce"

C#	Copy Code
C1Accordion1.Animated.Effect = "easeInOutBounce";

In Markup

You can add the markup for the Animated property directly to theC1Accordion markup. It is automatically added to the markup if you set the property in the page at design time. The markup looks like the following:

	Copy Code
<cc1:C1Accordion ID="C1Accordion1" runat="server"> <Animated Effect="easeInOutBounce" /> </cc1:C1Accordion>

When you run the application and click an accordion header, you will notice the effect as the content pane expands.