SOLVED: Accordion Content Auto-Scrolls Inappropriately Under Certain Circumstances

Bricks Version: 1.3.7
Browser: Edge
OS: Windows
URL: E-Book Creation and Distribution Service for Authors

I have an accordion with seven content elements. The elements behave correctly when opened in most cases… unless an element several below a currently opened element is opened.

For example, using the provided link: Open “Why Not Use a Free Solution?” Then, open “How Does This Work.” The page scrolls so that the beginning of the content for “How Does This Work” is not visible (you have to scroll up to get to it).

This doesn’t seem to happen when consecutive / adjoining elements are opened. And obviously, the behavior is a sub-optimal user experience.

Any one run into this? Are there any fixes?

Thanks!

Hi Matthew,
as far as I can see it is not a bug. The behavior is caused by the top item closing, reducing the height. This is also the case with items that follow each other directly, depending on your scroll position and the length of the content.

The only way around this is to enable “behave like tabs”. This way the height is preserved.

I just compared this with the Bootstrap Accordion and the behavior is 1:1 the same: https://vimeo.com/711979369/ba2cb592c1

Best regards,
timmse

1 Like

Hmmmm… well, if it’s not a bug, it’s certainly not a great user experience. When you click on a FAQ entry, you expect to begin reading the beginning of the answer to the question, not the middle of the answer to the question. :wink: The Bricks accordion working exactly like Bootstrap doesn’t necessarily mean it’s as good as it can be. Any thoughts on a workaround while still maintaining the accordion use (not converting to tabs, which have their own issues)?

1 Like

As I said, it depends a lot on the scroll position and the length of the content. After all, we have no influence on that :smirk: