Streaming live at 10am (PST)

Toggle Tabs to off, and Make selecting new tab group hide others


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:

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:

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.