Applying Animation to the Accordion

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

<wijmo:C1AccordionExtender ID="Panel1_C1AccordionExtender" runat="server"

TargetControlID="Panel1">

</wijmo:C1AccordionExtender>

Create an ASP.NET Web application.
While in Design view of your Web application, navigate to the Visual Studio Toolbox and double-click the Panel control to add a panel to the main content of your page.
Add some content to the panel within the <asp:Panel> tags. For example:

<div>

<p>

Pane 1 content here.

</p>

</div>

<div>

<p>

Pane 2 content here.

</p>

</div>

<h3>

Pane 3</h3>

<div>

<p>

Pane 3 content here.

</p>

</div>

<h3>

Pane 4</h3>

<div>

<p>

Pane 4 content here.

</p>

</div>

Click the Panel smart tag and select Add Extender from the Panel Tasks menu.
In the Extender Wizard, select C1AccordionExtender and click OK. A C1AccordionExtender control is added to the page and the TargetControlID is set to Panel1.

<wijmo:C1AccordionExtender ID="Panel1_C1AccordionExtender" runat="server" TargetControlID="Panel1">

</wijmo:C1AccordionExtender>

Select View | Properties Window in the Visual Studio menu.
Click the drop-down list at the top of the Properties window and select Panel1_C1AccordionExtender.
Expand the Animated property and enter an animation effect next to the Effect property.