Help finding a workaround alternative to adding interactions on nested classes

Design help Animations & Interactions
1

I’m creating a site for an adoption agency and very new to using Webflow.

There is a FAQ section on the “I’m Pregnant” page at the read-only link below. The site is primarily accessed by mobile users. So, I’d like each FAQ to open into a full screen overlay when clicked. I’ve started this already by creating a basic overlay and adding the interactions to make it open.

But I need each question to open a different overlay/a different question and answer. Since it doesn’t look like I can add interactions to nested classes, the only path I can see is to create a whole separate class for each question and create the two interactions (open & close) for each separate class.

This sounds pretty messy. Is there an easier way that I’m not seeing? And if not, is there a way to copy the style settings of one class to another without breaking the original class?

Thanks so much for any ideas!

Here is my public share link: LINK
(how to access public share link)

2

Hi @MindMeldCreative

First of all, Welcome to Webflow community :smile:

You CAN use nested classes in the interaction. All you need is create a global class with exactly same name. You don’t have to use it as a global class, but it will become available in the interactions and will affect nested classes.

Hope it helps.

Regards,
Anna

3

You can also design it so the question and the answer are under the same parent div. Then use the nested or sibling option in the interaction settings.