Streaming live at 10am (PST)

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


#1

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:


http://www.conciliolabs.com/


#2

@tomjohn

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.


#3

Nuffield Health have the effect on their menu that I am after. They use JS but this can easily be achieved with tabs.

https://www.nuffieldhealth.com


#4

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.


#5

@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.


#6

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.


#7

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.


#8