Accordion - expand/collapse not working (e-expanded)

[DeBao Chua]

Hi expert,

I read the documentation from Syncfusion website e.g. https://ej2.syncfusion.com/react/documentation/accordion/expand-mode.html

From there, I can really understand the codes but I cannot figure out why my side does not work. I think I need to use className="e-expanded" but it is not working. What am I missing?

However I am using another way (DOM element) without using AccordionItemsDirective.

Sample 1: https://stackblitz.com/edit/react-ts-scrclm?file=accordion.tsx (the output does not work but I provide the codes there - see the screenshot below)

Sample 2: https://stackblitz.com/edit/react-ts-nyausa?file=accordion.tsx

[Deepa Loganathan]

Hi DeBao Chua,  

Thanks for contacting Syncfusion support. 

We understood your requirement to use HTML element ad Accordion Panel instead of AccordionItemsDirective.  

 

 

Please note that the “expanded” API is applicable only for AccordionItemsDirective and it does not support HTML elements and the Accordion panel will not expand based on the ClassName property. 

 

 

However, you could achieve this requirement by using expandItem method as given in the below code snippet.  

 

1. Bind the created event to the Accordion control

 

<AccordionComponent id="accordion" ref={accordion => this.accordionInstance = accordion!} heightAdjustMode='Auto' overflowMode="Scrollable" className="e-fill" created ={this.oncreated.bind(this)}> 

 

 

2.       In created event, enable the expandItem method to expand to first item. 

public oncreated(e: CreatedEventArgs) { 

    this.accordionInstance.expandItem(true,0) // expand the first item 

  } 

 

For your reference, we have created a sample with HTML elements instead of Directive. Please check.  

 

 

Sample: https://stackblitz.com/edit/react-ts-nyausa?file=accordion.tsx 

Please let us know if you have any further queries.  

Regards, 

  

Deepa L. 

[DeBao Chua]

Hi Deepa,

Thanks for your email and feedback.

The sample URL you sent me does not work -I don't know why but I understand what you were trying to explain so I use my own concept to implement the codes but I encounter some problems.

"Cannot find name 'CreatedEventArgs' -- I know I need to import it from syncfusion library but I cannot find CreatedEventArgs in Syncfusion tutorial - I need to know which file I should import.

e.g. 

import { AccordionComponent, CreatedEventArgs } from "@syncfusion/ej2-react-navigations";

Error 1: Cannot find name 'CreatedEventArgs'

Error 2: What am I missing?

[Deepa Loganathan]

 

Hi DeBao Chua,   

 

We regret the inconvenience caused.  

 

The created event of accordion does not need importing CreatedEventArgs. Instead, you could expand the Accordion item by in the selected event of Tab component as given in the below code.  

 

  <TabComponent heightAdjustMode='Auto' id='defaultTab' selected={this.onselected.bind(this)}  > 

 

 

  

 public onselected() { 

 

     var ele = document.getElementById("accordion") 

       ele.ej2_instances[0].expandItem(true,0) // expand the first item 

     

  } 

 

 

Also, in the sample shared in our last update, the edited items as per your requirement were not reflected properly in the forked link. So, we have modified the sample as per your need and attached in the below Stackblitz link. Please check and let us know if you have any further queries. 

 

Sample: https://stackblitz.com/edit/react-ts-evj3e2?file=tab.tsx  

 

Regards,  

Deepa L. 

[DeBao Chua]

Hi Deepa,

Thank you for the latest source codes and explanation.

It works perfectly. =)

[Deepa Loganathan]

Hi DeBao Chua,    

 

Most welcome. Please let us know if you have any further queries.  

 

Regards,  

 

Deepa L.