The C1ExpanderExtender supports animation effects when the extender is expanded and collapsed. You can enabled or disable animation and set a custom animation effect with the Animated property. In this example you'll add four expanders, one with the default animation, two with custom animations, and one with animation disabled.

Complete the following steps:

1. Create a new ASP.NET Web Application.
2. In the Solution Explorer, right-click the project and choose Add Reference. Locate and add a reference to the C1.Web.Wijmo.Extenders assembly.
3. Switch to Source view, and add the following markup at the top of the page to register the assembly:

<%@ Register Assembly="C1.Web.Wijmo.Extenders.4" Namespace="C1.Web.Wijmo.Extenders.C1Expander" TagPrefix="Expander" %>

Note that you may need to edit the above depending on the assembly you are using.

And add the following markup within the main <div> tag to add four Panel controls and set the expander extenders:

<h4>Default expander animation</h4>

<asp:Panel ID="Panel1" runat="server">

    <h3>Header</h3>

    <div>Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris sapien, cursus in.</div>

</asp:Panel>

<Expander:C1ExpanderExtender ID="Panel1_ExpanderExtender" runat="server" TargetControlID="Panel1">

</Expander:C1ExpanderExtender>

<h4>Custom expander animation</h4>

<asp:Panel ID="Panel2" runat="server">

    <div>Header</div>

    <div>Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris sapien, cursus in.</div>

</asp:Panel>

<Expander:C1ExpanderExtender ID="ExpanderExtender2" runat="server" TargetControlID="Panel2" Animated-Effect="custom1" Expanded="false"></Expander:C1ExpanderExtender>

<h4>Custom animation using jQuery effects</h4>

<asp:Panel ID="Panel3" runat="server">

    <div>Header</div>

    <div>Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris sapien, cursus in.</div>

</asp:Panel>

<Expander:C1ExpanderExtender ID="ExpanderExtender3" runat="server" TargetControlID="Panel3" Animated-Effect="custom2"></Expander:C1ExpanderExtender>

<h4>Disabled animation</h4>

<asp:Panel ID="Panel4" runat="server">

    <div>Header</div>

    <div>Vestibulum ut eros non enim commodo hendrerit. Donec porttitor tellus non magna. Nam ligula elit, pretium et, rutrum non, hendrerit id, ante. Nunc mauris sapien, cursus in.</div>

</asp:Panel>

<Expander:C1ExpanderExtender ID="ExpanderExtender4" runat="server" TargetControlID="Panel4" Animated-Disabled="true"></Expander:C1ExpanderExtender>

The first expander uses the default animation, the second and third use custom animation effects, and the last has animation disabled (with Animated-Disabled set to True). In the next step you'll add script for the custom animation effects.

4. Add the following script to set the custom animation effects for the second and third expanders:

<script id="scriptInit" type="text/javascript">

    $(document).ready(function () {

    jQuery.wijmo.wijexpander.animations.custom1 = function (options) {

        this.slide(options, {

        easing: "easeOutExpo",

        duration: 900

        });

    }

    jQuery.wijmo.wijexpander.animations.custom2 = function (options) {

        if (options.expand)

        options.content.show("puff", options, 300);

        else

        options.content.hide("explode", options, 300);

    }

    });

</script>

One custom animation uses an easing effect animation, the other uses jQuery animation.

What You've Accomplished

• Press F5 to run your application and click on each expanders header to view the animation effects. Observe that :
• The first expander demonstrates default expand/collapse animation effect.
• The second expander demonstrates custom animation (custom1) with "easeOutExpo" easing and duration of 900ms.
• The third expander demonstrates custom animation(custom2) using jQuery effects.  The "puff" effect is used for expand animation and "explode" for the collapse animation.
• For the fourth expander the animation is disabled with the Animated-Disabled property set to True.