Managing Div Expansions with Webflow Interactions Only

Design help Webflow integrations
1

Hello Webflow Community,

I’m looking for some advice on setting up interactions in Webflow without the use of custom CSS or JavaScript. I have multiple clickable divs in my project, and I want to set up an interaction such that clicking on one div will expand it to show more content, while any other expanded div collapses automatically.

Here’s the desired behavior:

  1. Clicking on a div expands it, revealing additional content.
  2. Clicking on another div automatically collapses the previously expanded one and expands the new one.

Challenge: I am trying to achieve this with Webflow’s built-in interactions only and want to avoid using any custom CSS or JavaScript. I’m unsure how to ensure that only one div can be expanded at a time using Webflow’s native interactions.

Questions:

  1. Is it possible to manage this type of interaction using only Webflow’s interaction tools?
  2. Can anyone share insights or examples on how to configure these settings?

Any guidance on how to set up these interactions purely within Webflow’s interface would be greatly appreciated. Thank you!

2

Easy.

DIV container
  DIV .item
    content
  DIV .item
    content
  ...

The basic technique is that your interaction trigger would be e.g. all .item elements. it would;

  1. Collapse all .item elements on the page, then
  2. Expand the one specific .item you’ve clicked

You can create more complex constructions, including trigger buttons, etc. The key is that two stage process. Webflow interactions supports certain relative targeting such as parent and sibling, so you could do;

DIV container
  DIV .item
    DIV .item-faq
    DIV .item-faq-content
  DIV .item
    DIV .item-faq
    DIV .item-faq-content
  ...

This is a common FAQ pattern. .item-faq might be your trigger, and .item-faq-content would be the piece you contract/expand. You’d target as sibling, and this works because of the .item wrapper, which ensures that only that one sibling exists for the trigger element.