Streaming live at 10am (PST)

Help with Tabs - adding close button to Tab section


#1

Hi guys, I'm working on an interaction for a client. I think tabs will work for this (if the chrome bug has been fixed, saw someone mentioned that a while ago).

Preview to get an idea for what I'm going for (basically, tabbed content, hidden by default with the option to close it):
http://expander-tester.webflow.com/

Webflow link:
https://webflow.com/design/expander-tester?preview=c4b5c55ef35991d32844d2ff0b5565dd

User hits this page. All Tabbed content is hidden (this works currently).
User clicks tab, content shows.
User can either click next tab above to see the other content, or click the close button in the section to close that tab.

My current issue, if the user clicks the close button how can I clear the focus from the tabs? (The browser still thinks the tab is active in my example, because I've just set that container to display:none;).

If there's a better way to do this, I'm open to it as well. Thanks!


#2

Hi @richard_knight4, one thing you can try is to add a little jQuery to your page, and when the close button is clicked, the focus will move to your target tab. You might have to play around with this, I did not test, but if you need to, you can add a line before the tab link click, to close the modal first.

Here is some basic example code, that you can try to paste into your Footer in the Custom Code section of Site Settings:

<script>

$( document ).ready(function() {

    $( '.close-button' ).click(function() {
        $(".target-tab-link").click();
    });

});

</script>

The .close-button is the class of your button. The .target-tab-link is the class of the tab link you want to click after the close button is pressed.

After adding the code to your Footer in Custom Code section of Site Settings, then save and republish your site. Make sure you are using the right class name for the button and correct class name for the target tab link.

I hope this helps. Cheers, Dave


#3

Hi @cyberdave!

Thanks for the response. I'm just wondering though, what do you mean by moving focus to target-tab-link? Will that clear its active state when the user his the close button? I want to clear the focus / active state from the tabs if the user hits the black close button so they're basically resetting it (just in case they close Castelli and want to open the same one again wink Like simulating an accordion behavior, but with tabs.

Cheers! I'll give this a shot right now.


#4

Hi @richard_knight4, you can also set focus to some other element on the page after clicking the button, it does not have to be the tab-link that you set focus.

<script>

$( document ).ready(function() {

    $( '.close-button' ).click(function() {
        $('.another-button').focus();
    });

});

</script>

Another suggestion, if you are just trying to make an accordion, to perhaps use a jQuery accordion widget:

http://jqueryui.com/accordion/


#5

Thanks @cyberdave! Unfortunately, that also seems to not be working. Is there no way to simply close an open tab after the user opens it?


#7

I'm currently looking to do the same, any news on this? Thanks


#8

Hi @Mowgli, thanks a lot for the post. Right now, this is not a built in feature.

It might be possible using custom code, you would need to try out the code above and see if it helps. If you have a read-only link to your site, then it would help to check how you have that setup now.

I think the object was to click on a close button that is within a tab content pane, and make another tab active.

I can help to see if this is possible, but since it needs custom code I cannot make any promises until I have a chance to fully look at this.


#9

I used the code you posted above and it worked a treat! thanks


#10

Hello, I have a similar request except, I would like to:

  • Add a close button to a tab
  • When close button is clicked, the tabs return to the default state of none active.

Also, one of the tabs I am making is a modal popup window. I have it working correctly and am able to close that window with interactions, however when I click on the modal tab after closing, it does not open.

  • Click modal tab, it opens
  • Close modal tab
  • Click modal tab again to open, it does not open (like it's permanently set to display off.

Can you think of a way to always return to the normal default state for tabs = none active, when a tab window is closed?

Many thanks in advance.

Todd


#11

Adding to the conversation in case someone else needs a solution:

Create and style all relevant tabs
Create one final empty tab. Style that tab's button differently than the others (call it "close" or whatever)
Make sure the active state on that close tab is removed or styled minimally for the closed state.

Doing this effectively creates a collapsed appearance even though it's really showing the empty tab.


#12