Streaming live at 10am (PST)

Show/hide content (outside of tab pane) based on current tab

Hello! :cowboy_hat_face:

I’m using Webflow tabs and want to show and hide content (outside of the tab panes) based on the current tab. (I’m putting text content in the tab panes but want videos outside the tab panes to show/hide based on what text is showing.)

I’ve tried to do this with custom code, but it feels very hacky. By inspecting my site, it seems that the tabs have id = "w-tabs-0-data-w-tab-0", id = "w-tabs-0-data-w-tab-1", etc. and the current one has class = ".w--current". But when I try custom code that selects for this, like:
if ($("#w-tabs-0-data-w-tab-0").hasClass(".w--current"))
it never triggers. I don’t know why. I’ve tested to make sure the selector works, but any logs inside the if statement never show up.

Is there another way to do this? If not, can anyone help me sort out what’s wrong with how I’m trying this currently?

Thank you!

(I can share my site if that’d be helpful, but this is really more of a general question of how to identify when a tab is current and act on it.)

I did find one workaround. This isn’t a solution (since I can’t detect the current tab using this) but it accomplishes something similar:

  1. Add a different class to each tab link. Then you can use those classes as selectors, since for some reason selecting by id doesn’t seem to work.

  2. Then, set the content to show based on (a) the document loading and (b) which button is clicked. Schematically:

    $(document).ready(function() {
    $("#content_to_show_first").show();
        $("#content_to_hide_first").hide();
     });
    $(".tab-1").click(function() {
    $("#tab-1_content").show();
        $("#tab-2_content").hide();
    });
    $(".tab-2").click(function() {
    $("#tab-1_content").hide();
        $("#tab-2_content").show();
    });