The WijExpander 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 an ASP.NET Web application with a ScriptManager control and install Juice UI and the Wijmo Juice libraries to your project via NuGet.
2. In Source view, 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>
   

   <cc1:WijExpander ID="Panel1_WijExpander" runat="server" TargetControlID="Panel1">
   

   </cc1:WijExpander>
   

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

   <cc1:WijExpander ID="Panel2_WijExpander" runat="server" TargetControlID="Panel2" Animated-Effect="custom1" Expanded="false"></cc1:WijExpander>
   

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

   <cc1:WijExpander ID="Panel3_WijExpander" runat="server" TargetControlID="Panel3" Animated-Effect="custom2"></cc1:WijExpander>
   

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

   <cc1:WijExpander ID="Panel4_WijExpander" runat="server" TargetControlID="Panel4" Animated-Disabled="true"></cc1:WijExpander>
   

   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.

3. 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 the following:

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