Making a dynamic collection with hide/show content work inside a FLEX box

Hi, I’m wondering if anyone has tackled this challenge and could point out where I’m going wrong. I’ve looked at many of the related posts, but none address the convoluted situation I’ve created for myself with the design. :slight_smile:

My goal is to create a collection that will function similarly to this page:

On my client’s site, when you click on “Read More”, the orange content box should appear below and push any other content below down the page. Then the user can close the box when they are done reading it.


The black you see underneath the orange content box in the image above is the footer. The content is floating above the footer instead of pushing content down the page.

The struggle is due to the fact that all the content is within a flex box (and the flex box is inside a column of a row). So I had to use absolute positioning to get the orange content box to appear where I wanted it on the page.

If I take the content box out of the Flex box, I can get the hide/show content to work properly and push the content down the page.

However, then the content box is no longer a sibling and I am not able to use the “limit to sibling elements” setting for the open/close interaction. That’s a problem as it means all the hidden content on the page will open when any of the Read More buttons are clicked.

Perhaps there is a solution I’m missing (still relatively new to Webflow) or a better way to approach it?

This shows the structure of the elements involved:

These are the interaction settings on the open button:

These are the interaction settings on the hidden content div:

Any advice would be greatly appreciated. :pray:


Here is my site Read-Only:

Here is the page on my published live site:

Hi @suzanne

This is really tricky to explain how to overcome. I’ve got a solution which you can preview to see how it’s done, so check out the link below and have a good dig around the classes and interactions.

Read Only Link to demo:

In action:

Let me know if you get stuck and good luck with it!! :slight_smile: