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

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

        TargetControlID="Panel1">

        <Animated Effect="easeInOutCirc" />

    </cc1:C1AccordionExtender>

1. Create an ASP.NET Web application.
2. 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.
3. Add some content to the panel within the <asp:Panel> tags. For example:

<h3>Pane 1</h3>

                <div>

                    <p>

                        Pane 1 content here.

                    </p>

                </div>

                <h3>Pane 2</h3>

                <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>

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

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

    </cc1:C1AccordionExtender>

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