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:

1 Like


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.

1 Like

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.