Pagination with Accordions

Question

I am using accordions in a table where the rows expand to reveal more information about the selected row. While from an information perspective this is working well because we are being able to give a lot of details to the user without them having to navigate to another screen. What I also notice is that when we use accordions the length of the page keeps varying based on whether the accordion is open. This causes the pagination to keep moving up and down as well.

Although when I use it it does not feel unusable I feel that this may not be good practice going forward.

Any thoughts?

See this interaction here

Answer 1

This is the expected affordance, and in all my testing it represents no issues for users, they expect the navigation to be at the end of the element. If the element grows in size, the navigation will still be at the end, changing this could be quite problematic. Changes in layout are to be expected and the transition between open/close states in accordions proves to be of benefit, this is something extensively tested, so don't bother in forcing it otherwise.

However, if you see this represents an issue, please consider using other elements to display information. Personally, I'm not a big fan of them, but if it serves to your purpose, then go for it by all means. Try reading these articles for some guidance and reference Accordions Are Not Always the Answer for Complex Content on Desktops and Accordions on Mobile

Alternatively, you could have a fixed nav on bottom, see this quick mock I did for you:

This is something I have seen in some mobile apps and can be used on desktop. But then again, I don't recommend it. Instead, think if you REALLY need an accordion. And if so, go for it without forcing any weird behavior

Answer 2

It depends on the length of the table; if we're talking about the four rows from your example then I don't think you really need to worry at all: The pagination may move but it doesn't move very far.

If we're talking about a much longer table that scrolls off the page then the pagination isn't in view anyway so the user won't notice it moving until they look for it.

In that middle ground between the long and short tables you need to think about the amount of content that appears when a row is 'opened' - two or three lines probably won't make a great deal of difference to the user (after all, the pagination isn't going to move WHILE they're using it). But, if the content is long then you might want to consider opening it as a modal or popup to preserve the page length and therefore stop the pagination from moving.