Auto-Scroll to the New Open Accordion Item

accordion items for faqs

A common UX problem to solve: When using accordions that contain a lot of content; if the user has already scrolled past an accordion item, if they click to open the next item, the content can appear to shoot up the page as the previous item closes (due to the page changing height). This means the user may need to scroll back up to find the start of the content to continue reading.

showing example accordion item not visible

An age-old problem

The first thing to note is this isn't an issue with Bricks, or a failure with accordion elements. If you 'Google' the term "accordion scroll" you'll find pages of people asking this same question, coming across this same UX problem across different platforms, Webflow, Bootstrap, pretty much every WP theme that includes an accordion.

In this tutorial, we'll look at two ways to solve it.

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to all 250+ Bricks code tutorials with BricksLabs Pro