load accordion items dynamically with html

[TOKO FIDELE]

Hello, I am currently using the html version of the AccordionComponent component, 

I would like to load accordion elements dynamically with this html version. 

However when I add an item, I cannot scroll down this item to see its content. 

I use this html version of the accordion in several parts of my code, I would not want to change everything in migran to the jsx version of the component.

I referred to this link : https://ej2.syncfusion.com/react/documentation/accordion/how-to/load-accordion-items-dynamically/

however the html version is not explicit.

Thank you

[Vengatesh Maniraj]

Hi Toko, 

Greetings from Syncfusion Support. 

We have validated the shared details at our end and we suggest to visit the below our community forums which are similar to your requirement that we suspect. 

https://www.syncfusion.com/forums/143769/dynamic-accordians-in-listview 

https://www.syncfusion.com/forums/143771/error-when-adding-accordion-data-dynamically 

Kindly check the above and if still your requirement is not resolved kindly revert us with your Accordion codes to serve you better. 

Regards, 

Vengatesh 

[TOKO FIDELE]

Hi Toko, 

Greetings from Syncfusion Support. 

We have validated the shared details at our end and we suggest to visit the below our community forums which are similar to your requirement that we suspect. 

https://www.syncfusion.com/forums/143769/dynamic-accordians-in-listview 

https://www.syncfusion.com/forums/143771/error-when-adding-accordion-data-dynamically 

Kindly check the above and if still your requirement is not resolved kindly revert us with your Accordion codes to serve you better. 

Regards, 

Vengatesh 

Hello Vengatesh Maniraj . thank you for your prompt reaction.

I visited these links : 

https://www.syncfusion.com/forums/143769/dynamic-accordians-in-listview 

https://www.syncfusion.com/forums/143771/error-when-adding-accordion-data-dynamically 

the one that comes close to my concern is this: https://stackblitz.com/edit/react-neghe1?file=index.js

but it does not process the html version of the component as shown in the figure below.

The html version of the component to dynamically add an item is not developed.

Thank you 

[Vengatesh Maniraj]

Hi Toko, 

Thanks for the update. 

Based on your requirement, we have prepared the sample in HTML version which is available in below link, 

 render() { 

     return (<div> <ButtonComponent title='Show/hide weekend' onClick={this.onChange.bind(this)}>Add</ButtonComponent> 

    <AccordionComponent ref={acrdn => this.acrdnInstance = acrdn}> 

        <div> 

          <div> 

            <div> ASP.NET </div> 

          </div> 

          <div> 

            <div> 

              Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web applications and XML Web services. 

            </div> 

          </div> 

        </div> 

        <div> 

          <div> 

            <div> ASP.NET MVC </div> 

          </div> 

          <div> 

            <div> 

              The Model-View-Controller (MVC) architectural pattern separates an application into three main components: the model, the view, and the controller. 

            </div> 

          </div> 

        </div> 

        <div> 

          <div> 

            <div> JavaScript </div> 

          </div> 

          <div> 

            <div> 

              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. 

            </div> 

          </div> 

        </div> 

      </AccordionComponent></div>); 

    } 

} 

Sample: https://stackblitz.com/edit/react-neghe1-rd3tfq?file=index.js 

Kindly try the above sample and revert us for further assistance. If we misunderstood your requirement please share us more details to serve you better. 

Regards, 

Vengatesh. 

[TOKO FIDELE]

Hi Vengatesh.

thank you for your reply. you understand my concern, we are almost at the solution. in the example present in the example link that you specified in your last email: https://stackblitz.com/edit/react-neghe1-rd3tfq?file=index.js

you add well but the added item does not unfold on click to view its content.

the JavaScript PHP item that I added does not run at the click to present the content and it is added at the top, if possible the item must be added at the bottom of the list and that at the click it takes place to present the content

Thank

[Vengatesh Maniraj]

Hi Toko, 

Sorry for the inconvenience. 

We have validated the reported issue at source level deeply and came to the solution that if we want to load accordion items by dynamically we must use the AccordionItemsDirective tag which means if we would use the HTML version for accordion items, we could not support to load the items dynamically. So we suggest you to use the AccordionItemsDirective tag to load the items dynamically in your project like below,  

<AccordionComponent ref={acrdn => this.acrdnInstance = acrdn}> 

            <AccordionItemsDirective> 

              <AccordionItemDirective 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.' /> 

              <AccordionItemDirective header='ASP.NET Core' content='ASP.NET Core is a free and open-source web framework, and the next generation of ASP.NET, developed by Microsoft and the community. It is a modular framework that runs on both the full .NET Framework, on Windows, and the cross-platform .NET Core.' /> 

              <AccordionItemDirective 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.' /> 

            </AccordionItemsDirective> 

          </AccordionComponent> 

Sample: https://stackblitz.com/edit/react-neghe1?file=index.js 

Kindly try the above sample and revert us for further assistance. 

Regards, 

Vengatesh.