Build an accordion section in Webflow

If you have an accordion with longer content when it's open, here's an example of how to scroll to that element using some JavaScript in your Webflow project. This code has some global variables to make it easier for you to adjust. Let's take a look!

Clone this siteView the accordion

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Clone this site

Frequently asked questions

  • This is a sample question

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Block quote

    Ordered list

    1. Item 1
    2. Item 2
    3. Item 3

    Unordered list

    • Item A
    • Item B
    • Item C

    Text link

    Bold text

    Emphasis

    Superscript

    Subscript

  • This is a sample question

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Block quote

    Ordered list

    1. Item 1
    2. Item 2
    3. Item 3

    Unordered list

    • Item A
    • Item B
    • Item C

    Text link

    Bold text

    Emphasis

    Superscript

    Subscript

  • This is a sample question

    Heading 1

    Heading 2

    Heading 3

    Heading 4

    Heading 5
    Heading 6

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

    Block quote

    Ordered list

    1. Item 1
    2. Item 2
    3. Item 3

    Unordered list

    • Item A
    • Item B
    • Item C

    Text link

    Bold text

    Emphasis

    Superscript

    Subscript

The code

1// Set a pixel value for the amount of
2// space you want between the top of the
3// page and the top of the accordion
4const offset = 16;
5// add the class of your accordion to
6// the querySelector, we're using the native
7// Webflow dropdown element here
8const accordions = document.querySelectorAll(".accordion");
9// Set a delay in milliseconds for the scroll
10// and remember you'll want this to match any
11// animations you have on your accordion in Webflow
12const delay = 50;
13// check if the user prefers reduced motion
14const motionState = window.matchMedia("(prefers-reduced-motion: reduce)");
15
16function scrollToElement(element) {
17  const elementPosition = element.getBoundingClientRect().top + window.scrollY;
18  const offsetPosition = elementPosition - offset;
19
20  if (motionState.matches) {
21    window.scrollTo({
22      top: offsetPosition,
23    });
24  } else {
25    window.scrollTo({
26      top: offsetPosition,
27      behavior: "smooth",
28    });
29  }
30}
31
32// Loop through each accordion and add an event listener
33document.addEventListener("DOMContentLoaded", function () {
34  accordions.forEach((accordion) => {
35    accordion.addEventListener("click", function () {
36      setTimeout(() => {
37        scrollToElement(this);
38      }, delay);
39    });
40  });
41});
42