Accordion behavior with longer content

Beta
#1

Hi!

When Accordions are connected (when one closes by clicking the other one), there is some unwanted behavior with longer content.

  1. Open an accordion item that has longer content
  2. Scroll down and reach the next accordion item
  3. Open the next accordion item

The next accordion item is pulled upwards, beyond the viewport. The user doesn’t see it, so he needs to scroll up to find it.

I think that there should be a safety mechanism that would prevent the opened accordion to run out of the viewport. It should stick to the top of it if it is about to run away when opening it. It should also have adjustable margin offset for us to take sticky headers into account.

Thanks!

5 Likes
#2

You’re looking something similar to this correct? I can flesh it out more. This would be a nice addition for Mobile. There was another request for this feature going through the notes.

accordions-with-scrolling

4 Likes
#3

Just to say I have experienced this same problem with a long accordion. clicking the ‘next’ accordion item doesn’t focus on the accordion item but rather where the accordion item was before the previous accordion item closed.

This also happened on desktop for me

1 Like
#4

I will most likely just set this as a button like “Scroll With” on the accordions and do something similar to my GIF.

2 Likes