Apply Animation

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

Create an ASP.NET MVC 5 Wijmo application.
In the Solution Explorer, expand the Views | Shared folder and double-click _Layout.cshtml to open the file.

Add the following markup within the <body> tags of the page. Notice that there are two different <div id="accordion"> elements. You're going to set animation for two of the panes and disable animation for the other two panes.

<div id="accordion">
<h3>Pane 1</h3>
                <div>
                    <p>
                        Pane 1 content here.
                    </p>
                </div>
                <h3>Pane 2</h3>
                <div>
                    <p>
                        Pane 2 content here.
                    </p>
                </div>
  </div>
  <div id="accordion2">
                <h3>
                   Pane 3</h3>
                <div>
                    <p>
                        Pane 3 content here.
                    </p>
                </div>
                <h3>
                   Pane 4</h3>
                <div>
                    <p>
                        Pane 4 content here.
                    </p>
                </div>
</div>

After the last closing </div> tag you added in the previous step, enter the following jQuery script to initialize the wijaccordion widget and set the animated options.

<script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#accordion").wijaccordion({
            animated: "easeInOutBounce", duration: 700,
});
            $("#accordion2").wijaccordion({
            animated: false
});
        });
    </script>

When you run the application, click either of the first two panes to see the bounce animation. When you click Pane 3 or Pane 4, there is no animation effect.