How to animate the opening and closing of JavaScript Accordion?
The Accordion control is a vertically collapsible content panel that displays one or more panels at a time within the available space.
Accordion animation
The accordion control expands and collapses its pane with animation effect using the Animation library by default. The animation is given as ‘SlideDown’ for expanding the panel using the expand animation property and ‘SlideUp’ for collapsing the panel using the collapse animation property. You can also disable the animation by setting animation effect to none.
But you can customize the animation with easing, duration, and various other effects of your choice by using the animation property of Accordion.
JavaScript
var accordion = new ej.navigations.Accordion({
items: [
{ header: 'ASP.NET', expanded: 'true', 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.' },
],
animation: { expand: { effect: 'FadeIn', duration: 400, easing: 'linear' },collapse: { effect: 'FadeOut', duration: 400, easing: 'linear' }}
});
Documentation and code snippets of Accordion animation
The user guide explains how to showcase the accordion animation sample with code snippet for the following platforms:
Conclusion
I hope you enjoyed learning about how to animate the opening and closing of JavaScript Accordion.
You can refer to our JavaScript Accordion feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Accordion example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
