| layout | post |
|---|---|
| title | Customize expand collapse actions in |
| description | Learn here all about Customize expand collapse actions in Syncfusion |
| platform | ej2-javascript |
| control | Customize expand collapse actions |
| publishingplatform | |
| documentation | ug |
| domainurl |
Accordion component supports customizing the expand or collapse animation action behavior. You can manually change the expand animation action performed after the collapse animation operation performed on already expand pane when the expand icons are clicked.
By default, the Accordion component pane is expanded or collapsed, when click the expand or collapse icon. It is not affected on already expand pane.
The following sample demonstrates, how to expand the collapsed Accordion item after collapse animation performed on the expanded Accordion item using created, expanding, and expanded event. In the Expanding event, get the previously expanded item index and prevent the expanding behavior using args.cancel option. Expand the Accordion item dynamically based on specifying the index value using the expandItem public method and expanded event.
{% if page.publishingplatform == "typescript" %}
{% tabs %} {% highlight ts tabtitle="index.ts" %} {% include code-snippet/accordion/accordion-actions-cs1/index.ts %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/accordion/accordion-actions-cs1/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/accordion/accordion-actions-cs1" %}
{% elsif page.publishingplatform == "javascript" %}
{% tabs %} {% highlight js tabtitle="index.js" %} {% include code-snippet/accordion/accordion-actions-cs1/index.js %} {% endhighlight %} {% highlight html tabtitle="index.html" %} {% include code-snippet/accordion/accordion-actions-cs1/index.html %} {% endhighlight %} {% endtabs %}
{% previewsample "page.domainurl/code-snippet/accordion/accordion-actions-cs1" %} {% endif %}