Streaming live at 10am (PST)

Multiple Show Hide help with Interactions 2.0


#1

Here’s what I sent to support, asked to post here

I would like to know how to easily add show/hide on Click trigger to multiple elements (without having to do a new interaction for each element)

=====================================

Hi there

https://preview.webflow.com/preview/your-company-fomormations?preview=64efefe7f3ddeaa0b6b1b5b656f12c5e

Please visit

http://your-company-fomormations.webflow.io/packages/compare-packages

Due to the 5 col table I have a different layout from mobile landscape down

I just want to show hide the ‘whats included’ when you click the blue button - what’s included

I’m transitioning over to interactions 2.0 and getting it now. However I found it incredibly difficult to get the ‘Limit to nested elements’ functionality working - buy changing the Target item

Nightmare!

So reverted back to Legacy method. And STILL IT DON’T WORK!

Makes me think it’s a bug as checked another site where it works fine with same set up.

Wasted valuable time I dont have so wonder if you can help me out? Sure its something dumb

=======================================================================

UPDATE

So I have reverted to INT 2 - and have the first link working fine (Digital Package)

When I add the interaction to the second package button it fails. Despite changing the Target to the second ‘Included Items’ class - it still affects the first class

I cant find any tutorial to help me figure this out

(I realised that the INT 1 method wasn’t working as the element I want to show/hide is not nested under the Trigger button.)

Help appreciated - the Webflow tutorial on this only shows for one element which I have working

Hopefully this makes some sense!

(I also removed the interaction from the second element as thought that would be easier to show me how to apply the action to multiple elements)

Remember to switch to Mobile landscape to see the elements

Many thanks


#2

Hi @StuyGoy27, thanks for hanging in there, I think this issue will be resolved if you change the layout of your buttons to use flexbox instead of rows and columns and make sure your buttons are on the same level as the included items div.

Then you can use the nesting features to limit the interaction to sibling elements (in this case, but can also create layout which affects children classes).

I made a quick video:

I hope this helps


#3

Hey @cyberdave - thanks for the detailed explanation.

Nice and clear.

I’m glad it does work that way!

Thanks a lot