Initial state issue on tabs component


Hello

I have an issue with a particular animation on tab change for a tab component I’ve got:

Basically, on tab change, there’s a text element for the paragraph which goes from 0 height (initial state/closed tab) to auto height with an animation (on open tab), so that it appears as an expanding accordion:

But the issue is that sometimes (not always), when the page loads, that animation doesn’t appear to kick in for the default ‘open’ tab, and so you can only see the icon and heading, not the paragraph. It’s obviously selecting the tab as current as I can see w—current in devtools, and also the image on the left is for the correct tab, and the other indicators on the selector (darker colour and ‘minus’ icon) are there, so its literally ONLY this 0 height that’s the problem. I had the same issue on another site using this component so I think it’s a big to do with Webflow tabs potentially.

It’s annoying as I can’t pinpoint the issue, and it only happens sometimes - more often on mobile but on desktop too.

Anyone had a similar issue and able to help me out with this one? Thanks!

Here is my site Read-Only: LINK

Set the default tab’s paragraph to height:auto on page load and only animate height for non-active tabs , Webflow sometimes misses the initial state if it’s set to 0. Had to fix this on a client build by adding a page-load interaction that forces the first tab’s content visible before animations run.

Hey @bradmalcolm ,

You could setup a CSS rule via placing the following inside head tag section of the custom code of the page where the tab element exists:

<style>
.opportunities_tab-link.w--current .opportunities_paragraph {
    height: auto !important;
}
</style>

This should probably help solve the issue on page load and should respect the settings you have via interactions once the user clicks on each tab as well. Hope this helps.

Sorry, I never got a notification so didn’t know anyone replied! Thanks, that sorted it :)

Sorry, I never got a notification about replies - thanks for your help, managed to sort with the other coment!