Accordion, Expand/Collapse doesn't work when used with paging

Solutions General
1

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.

2

Hi @PrashantKurlekar,

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.

3

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.

image
image1561×741 43.9 KB

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.

4

Hi @PrashantKurlekar

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.

1 Like
5

@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.

1 Like