I am working on implementing Accordion with Paging. “Expand All | Collapse All” buttons remain disabled when you navigate to any other page when one of the Accordion is Collapsed.
I am initializing accordion when navigating to next page.
Any help or guidance will be helpful.
I was wondering if you can provide a bit more information about the page you are working on. Are you creating pagination within the Accordion or many accordions that are Paginated? If you can please provide us a link to example or at least screenshots.
Hey @anna.yeshtukova, Thank you for your response.
I have a page that contains many accordions, and at the bottom of the page, we have a paging component.
Each page will contain an “x” number of accordions based on search result/page size. After binding the search result, I initialize the accordion using window.NSW.initAccordion(‘id’).
A scenario that doesn’t work,
Results will be displayed on three pages
Expand all the sections with Expand All option - All sections are expanded.
Click on the Page 2 link at the bottom.
“ExpandAll Collapse All” links on Page 2 are disabled.
I am re-initializing the accordion on every page change.
Hope that explains my issue correctly, let me know if you need more details.
Thank you for looking into my problem.
It can be a number of reasons why following scenario doesn’t work. It’s really hard for me to pinpoint particular reason without inspecting the code. Is it possible for you to create a codepen with it if the project isn’t live yet?
Few areas that I would look for issues are:
Make sure that you initialising all accordions correctly. initAccordion is not a part of our core functions so I’m not sure what’s happening inside it.
Make sure that HTML structured correctly. Expand/Collapse buttons should be a part of the same DOM element that you are using to initialise accordion.
Depending on how you loading extra page content - if you are re-initialising accordion on same buttons but reloading result - our accordion script may not be suitable as it expects for accordions and toggle buttons to be loaded at the same time and only initialised once.
I hope this helps and please let me know if you have any further questions.
@anna.yeshtukova Thank you for being so helpful.
Yes, you were correct initAccordion was custom script added to tackle a particular scenario that was creating the problem. I fixed the current issue by calling .collapseAll() on accordion element.
Thank you for your help.