Streaming live at 10am (PST)

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


#1

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: https://www.marieforleo.com/success-stories/

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:
hidden%20content

Any advice would be greatly appreciated. :pray:

Suzanne


Here is my site Read-Only: https://preview.webflow.com/preview/succeed-draft?preview=aed0a3d8dfdcef9f98f40389ff93da2e

Here is the page on my published live site: http://succeed-draft.webflow.io/about/success-stories


#2

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: https://preview.webflow.com/preview/digital-mast-webflow-examples?preview=d60aed38d2239d8c037254d74b27131d

In action: http://digital-mast-webflow-examples.webflow.io/

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