Animate the Expander

The wijexpander widget supports animation. Simply set the animated option to take advantage of this feature. See the Expander > Animation sample of the MVC Control Explorer live demo at http://demo.componentone.com/ASPNET/MVCExplorer/expander/Animation.

Create an C1 ASP.NET MVC 5 Web Application.
Navigate to the Solution Explorer, expand the Shared folder inside the Views folder, and double-click _Layout to open the file.

Add the following markup within the <body> tags of the page, just after @RenderBody():

 <div id="expander1">
    <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>
</div>
 <div id="expander2">
    <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>
</div>
```
This markup will add content for four expander widgets to the page. In the next step, you'll set animation for the expanders.

After the closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijexpander widgets and set the animated options:

<script id="scriptInit" type="text/javascript">
    $(document).ready(function () {
        $("#expander").wijexpander();
        $("#expander2").wijexpander({
            animated: "custom1", expanded: false
        });
        $("#expander3").wijexpander({
            animated: "custom2"
        });
        $("#expander4").wijexpander({
            animated: false
        });
        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>

This will initialize the expanders and add animation.

What You've Accomplished

Press F5 to run the application, click on the header of each expander to view the set animations. The first expander displays the default animation, the second and third expanders display custom animation, and the fourth expander's animation has been disabled.