Accordian FAQ behaving oddly

Design help General
1

Here is my site Read-Only: Webflow - Bookery

Hello, everybody! Thank you for clicking on this topic.

I’m not sure how to describe what’s happening, but when I click to open the accordian FAQ at the bottom of this site, the topic below doesn’t shift down to make room, and when I close a question, the question beneath slides back up as if it’s been at the very bottom of the screen. Can anyone tell what’s going on?

Thank you :)

2

Hi there,

The overlay behavior you’re seeing with your accordion happens because the dropdown list’s position is set to absolute by default. Here’s how to adjust the position settings to fix this:

  1. Select the parent dropdown element (your “Accordion item”)
  2. Click the cog icon to open Dropdown settings and click “Show” next to Menu
  3. Select the Dropdown list element
  4. In the Style panel > Position, change Position to static
  5. Select the parent dropdown element again and set Overflow to hidden in the Style panel > Size

This will ensure content around your accordion adjusts properly when expanding and collapsing.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

I generally don’t use accordions for this because they have additional script and CSS involved that doesn’t really assist here. You can just build your own using some divs and interactions.

I’d recommend you go to Made in Webflow and look for a setup you like that you can copy-paste.

4

That happens when the accordion panel is absolutely positioned instead of static. Switch the dropdown list to position: static and make sure the parent wrapper has overflow: hidden so the rest of the page flows correctly. Had the same issue on a client FAQ build and this fixed it right away.