Accordion - first item open on scroll

Hi all

Seems to be simple but maybe not?
Any clues to a basic webflow accordion that would present with the first item open?

Would close upon second item invoked etc. and then return to default state of first item open afterwards.

Thx


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Interactions works by adding styles directly to the affected elements, so one approach to this is to design your accordion, and then have a small piece of custom CSS which opens just the first item, using CSS pseudoselectors like :nth-child()

When users click, that element-specific styling applied by interactions will be considered more specific and will override it. Just make sure you’re using the same technique consistently, e.g. hide/show, or div height 0. Chrome devtools is your friend here.

Your title mentions triggering the open on scroll which is a bit different. You might be able to trigger that item-1 open with a separate scroll interaction, or you can use custom JS to build that.

Thx Michael. Just to clarify. The first accordion is open by default (should not of mentioned scroll). Will give it a try.

1 Like