We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

load accordion items dynamically with html

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.
however the html version is not explicit.
Thank you



5 Replies

VM Vengatesh Maniraj Syncfusion Team February 4, 2020 05:39 AM UTC

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. 


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 



TF TOKO FIDELE replied to Vengatesh Maniraj February 4, 2020 09:31 AM UTC

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. 


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 : 
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 


VM Vengatesh Maniraj Syncfusion Team February 5, 2020 10:02 AM UTC

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>); 
    } 
} 


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. 



TF TOKO FIDELE February 5, 2020 11:29 AM UTC

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



VM Vengatesh Maniraj Syncfusion Team February 6, 2020 04:34 AM UTC

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> 


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

Regards, 
Vengatesh. 


Loader.
Live Chat Icon For mobile
Up arrow icon