Tabs menus remain open in the background after clicked

Hello Guys, i am sharing the link below.
When i open a tab, on the 3-collumn grid, it looks like i can still click on its content although it is closed. Can you help? The page i am referring: http://basset-gold-new.webflow.io/works/comparison-table


Here is my site Read-Only: https://preview.webflow.com/preview/basset-gold-new?preview=b3aebd12daac079aed525ead64f3878a
([how to share your site Read-Only link][2])

Have you sorted this? It seems to work fine for me.

CloudApp

It works but if you notice you can click the tab menuā€™s children when it is closed too

Iā€™ve had a play with this for almost an 30 mins, and I canā€™t figure out whatā€™s causing that.
Itā€™s a great interaction so I hope itā€™s easily solved.

I donā€™t think itā€™s a bug though, can you help @Brando

Ī£Ī¹Ī³Ī³Ī½ĪæĪ¼Ī¹ ĻĪµ Ļ†Ī¹Ī»Īµ Ī¼ĪæĻ….

Thanks for pinging me on this @magicmark.

@Tasos_Koutsofavas it looks like you are using some custom JS to hide and show the tabs menu. You have the tabs menu going to a 0px height, but it isnā€™t set to overflow: hidden so the content (tab links) are still showing on the live site. If you add that bit of CSS to your custom code you should be good (GIF).

Alternatively, you can try building out this interaction using Webflow interactions rather than custom code.

Hope this helps!

1 Like

could you provide the code as when i try it from webflow UI it will not work

also when i do this on inspect mode in chrome the tams menu does not open

@Tasos_Koutsofavas Unfortunatley my knowledge of JS isnā€™t advanced enough explain the exact syntax for building this out :confused:

@bart any thoughts on this?

Hi @Tasos_Koutsofavas

Just realized you are using legacy interactions here as well. Instead of overflow: hidden, you can use display: none for the initial state of the tabs menu, along with the 0px height. Then on click you can set the tabs menu back to display: block before setting the height back to auto.

On the second step, ā€œThen on click you can set the tabs menu back to display: block before setting the height back to auto.ā€ do you mean in the legacy interactions? Or on the tabs menu itself in the designer? I did what you suggested into the legacy interaction but it did not work.

Just sent you a DM @Tasos_Koutsofavas - hope that helps! :slight_smile:

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.