Two Interactions with One Click

Hello Everyone,

I’m attempting to create an accordion structure for my post template for my recipe guide site. I want the accordion structure to have multiple levels, but when I click the child accordion it also does the interaction for the parent accordion.

Is there a way to only interact with the child and not the parent?

I used the accordion from the Reader template to help create this. I’ve tried for a couple hours with no success because I’m brand new to web development.

Breakdown Section
** Cuisines** <— Click here first
** Texas** <— Click here second, then it opens the content, but also closes Cuisines
** Content**
Kansas City

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

Hello Michael.

You probably have the same class on the parent and the child element. If you give the child element a unique class you can style it without effecting the parent.

Does that answer your question?

Hey Felix,

I copied the original class and changed it. There is Accordion Wrapper for the parent and there is Accordion Wrapper Child for the child accordion. So I don’t think that is the issue.

Any other ideas?

(Designer link)

If i understand correctly you want all other accordions to close when a new one is opened.

I think this can be created with the webflow interactions. However it would be a bit complicated.

I would suggest keeping the functionality as it is now. it is more intuitive that you have to close the accordion yourself after you have opened it. is it not? Maybe you want to read 2 accordion texts at once. That would not be possible with functionality you are suggesting.

Thats my 2 cents.

Thanks for the help. I ended up redesigning based on the Webflow University tutorial and had the interactions only impact siblings. That did the job!

Ah okay, nice to hear you figured it out!