I’m trying to make my tabs have an on and off state, so that clicking a second time on a tab will revert the tab group back to the (none) state.
Also, I’m trying to make it so that selecting a second tab group would collapse the other tab groups back to the (none) state.
Here’s my preview link: https://preview.webflow.com/preview/alhi?preview=93c353a6fe6538722f4cb7ad4649b18a
Here’s a few examples of sites that have that functionality:
I too am struggling with the ability to close tabs, I was just coming on here to ask the same question.
When a user engages the tabs and opens them for the first time there is no easy way for them to click the same tab and the tab will close. I’ve seen a few JS based solutions but honestly, I can’t even begin to pretend I understand them.
Essentially I have several tabs and when I’m in a tab I want to be able to close the same tab by clicking the tab itself. Essentially, setting the tab view back to ‘None’.
@cyberdave @Waldo @thesergie any help guys? This seems like a pretty simple task.
Nuffield Health have the effect on their menu that I am after. They use JS but this can easily be achieved with tabs.
Hi @DanRobinson31 @tomjohn rather than using Tabs you could build out interactions to expand a section to auto height from 0px height that is set to overflow: hidden. See example 3 here: https://interactions.webflow.com/
You may be able to achieve this with panes on open/close states with interactions as well, or first click/second click but it may be a little more difficult to build out.
@Waldo I originally tried it like that, but I had to make each interaction turn on and off 9 other sections. There’s not a way to have a click event trigger a ‘reset to default appearance for everything but this one’. What ended up happning was that the on and off buttons needed to be clicked twice individually. It was a really bad interaction.
Is there really no easy way to turn off a tab? That seems like it would solve all of the complexity.
Same, I tried it exaclty like that and got the perfect result except for the fact that when I clicked one menu item it worked fine, when I clickd the next menu item it opened that on top of my other menu item. Maaning it stacked the show/hide div.
Do you know if there’s a way to do this? If not, that’s fine, I’m just trying to wrap up this project this week and want to have time to try other solutions if needed.
