Accordion Page Load issues

[Eric Swann]

I have an issue with the way that the accordion loads. It initially loads the accordion content as raw html with base site styles applied. This causes a brief moment on the page where everything looks poor. A fraction of a second later, the accordion UI is rendered and everything looks OK. I'm using the accordion as a sidebar for navigation, so it is visible on every page.

With each page that loads, there is this brief hiccup before the accordion renders. You can, in fact, see this same affect in your MVC example site where accordions are used. IMO, This load issue makes for an unprofessional looking transition between pages.

I'm using the "Plugin" implementation of the accordion. I have a partial view with Headers/Divs like your example followed by the Accordion html helper method which references the div id.

Is there some way to mitigate this issue, such as hiding the content until the accordion finishes rendering? Any ideas would be helpful. Is there a different accordion load approach where this doesn't happen?

[Eric Swann]

One thing I found that helped with this was to examine the styles that the SyncFusion "Skin" is applying to the divs/headers. In this case the skin i'm using is Vista. I then manually assign these classes to the control in the markup. The accordion still has an FUOC (Flash of Unstyled Content) as it selects the correct tab to be active, but it doesn't look nearly as bad as the completely unstyled content that displayed before.

I tried also putting in a Jquery script that hid the content until the page had finished it's display, but that didn't seem to help. I think the accordion already does that by default.

[Balaji K]

Hi Eric,

Thank you for using Syncfusion Controls.

The Accordion is based on jQuery UI as you are aware.The jQuery initializes in the client side and in between the transition of raw Html to accordion seems to be unprofessional and we are working on a solution to avoid this case by hiding the control on loading phase and display only on loaded state.

we would appreciate your patience.

Regards,
Balaji

[Bridget Murphy]

I wish your project work as intended. 

[SureshRajan Alagarsamy]

Hi Eric,

We have reviewed your query and understand that you are facing issue with EJ1 - Accordion control. We would like to inform you that our EJ1 products have been declared as retired products since our Volume 4 SP release, and we will not make any improvements to the EJ1 components. Refer to the below release notes for further reference.

Release Notes : https://help.syncfusion.com/js/release-notes/v20.4.0.44?type=all

However, We also recommend considering the use of the EJ2 Accordion component to see if it achieves the exact requirement from your side. We have included a link to the EJ2 Accordion component demo and documentation for your reference.

The EJ2 Accordion component has many features and capabilities, and it is compatible with the EJ1 components. We have also included a link to our compatibility documentation for your reference.

Compatibility documentation : https://help.syncfusion.com/js/compatibility-ej1-ej2       

EJ2 demo : https://ej2.syncfusion.com/aspnetmvc/Accordion/DefaultFunctionalities#/material3

EJ2 documentation : https://ej2.syncfusion.com/aspnetmvc/documentation/accordion/getting-started

Check out the shared details and get back to us if you need any further assistance.

Regards,

Suresh.

[Bridget Murphy]

Good luck on your project. I think it's best you share some pictures to help others help you better.

[Eric Swann]

Lol, thanks for the response 14 years later. I doubt this software product still exists.

[Eric Swann]

Are you serious? This question is over 14 years old.