Set custom animation in EJ2 TypeScript Accordion control

2 May 20237 minutes to read

Accordion supports custom animations for both expand and collapse actions from the provided animation option of Animation library. The animation property also allows you to set easing, duration, and various other effects of your choice.

Default animation is given as SlideDown for expanding the panel using expand animation property and SlideUp for collapsing the panel using collapse animation property. You can also disable the animation by setting animation effect as none.

The sample demonstrates some types of animation that suits for Accordion. You can check all the animation effects here.

import {Accordion, AccordionEffect} from '@syncfusion/ej2-navigations';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

let accordion: Accordion = new Accordion({
    items: [
      { header: 'ASP.NET', content: 'Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services.' },
      { header: 'ASP.NET MVC', content: 'The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller.' },
      { header: 'JavaScript', content: 'JavaScript (JS) is an interpreted computer programming language. It was originally implemented as part of web browsers so that client-side scripts could interact with the user, control the browser, communicate asynchronously, and alter the document content that was displayed.' },
    ]
});
accordion.appendTo('#element');
let listObjExpand: DropDownList = new DropDownList({
        index: 0,
        placeholder: 'Select a animate type',
        popupHeight: '150px',
        change: () => { valueChange();  }
    });
    listObjExpand.appendTo('#expandAnimation');
    valueChange();
let listObjCollapse: DropDownList = new DropDownList({
        index: 1,
        placeholder: 'Select a animate type',
        popupHeight: '150px',
        change: () => { valueChange1();  }
    });
    listObjCollapse.appendTo('#collapseAnimation');
    valueChange1();

function valueChange(): void {
  accordion.animation.expand.effect = <AccordionEffect>(listObjExpand.value);
  }
function valueChange1(): void {
  accordion.animation.collapse.effect = <AccordionEffect>(listObjCollapse.value);
  }
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/material.css" rel="stylesheet" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id="default" style="padding-bottom:75px;">
            <div class='row'>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <label> Expand Animation </label>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <select id="expandAnimation"> 
    <option value="SlideDown">SlideDown</option>
    <option value="SlideUp">SlideUp</option>
    <option value="FadeIn">FadeIn</option>
    <option value="FadeOut">FadeOut</option>
    <option value="FadeZoomIn">FadeZoomIn</option>
    <option value="FadeZoomOut">FadeZoomOut</option>
    <option value="ZoomIn">ZoomIn</option>
    <option value="ZoomOut">ZoomOut</option>
    <option value="None">None</option>
            </select>
                </div>
            </div>
            <div class='row'>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <label> Collapse Animation </label>
                </div>
                <div class="col-xs-6 col-sm-6 col-lg-6 col-md-6">
                    <select id="collapseAnimation"> 
    <option value="SlideDown">SlideDown</option>
    <option value="SlideUp">SlideUp</option>
    <option value="FadeIn">FadeIn</option>
    <option value="FadeOut">FadeOut</option>
    <option value="FadeZoomIn">FadeZoomIn</option>
    <option value="FadeZoomOut">FadeZoomOut</option>
    <option value="ZoomIn">ZoomIn</option>
    <option value="ZoomOut">ZoomOut</option>
    <option value="None">None</option>
            </select>
                </div>
            </div>
        </div>
        <div id='element'></div>
        <br/><br/>
        <div id='result'></div>
    </div>
</body>

</html>