Tabs menus remain open in the background after clicked

[Tasos_Koutsofavas]

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])

[magicmark (Mark Willis)]

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

[Tasos_Koutsofavas]

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

[magicmark (Mark Willis)]

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

Σιγγνομι ρε φιλε μου.

[Brando (Brandon Roche)]

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!

[Tasos_Koutsofavas]

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

[Tasos_Koutsofavas]

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

[Brando (Brandon Roche)]

@Tasos_Koutsofavas Unfortunatley my knowledge of JS isn’t advanced enough explain the exact syntax for building this out

@bart any thoughts on this?

[Brando (Brandon Roche)]

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.

[Tasos_Koutsofavas]

for the initial state of the tabs menu

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.

[Brando (Brandon Roche)]

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