I’m working on a WP site (currently localhost only) with a regular WP horizontal primary menu. On the front page further down I have a set of 8 vertical tabs (based on jQuery tabs) which are toggled by the 8 tab buttons (default behavior, sort of a secondary vertical menu if you like). Various sections (of which the tabs and tab content are one) of the front page are accessed via anchor links (IDs) off of the horizontal primary menu (smooth scroll). The primary menu turns into a sticky menu after a specific scrolling distance.

What I would like to achieve:

Besides the regular tab/tab-content toggling via tab buttons (clicking tab buttons) I would like the user to be able to access the tab content via the primary menu. Essentially, when clicking the primary menu link “Menu3” the class “vc_active” of both the first tab and the first tab panel should be removed and the class “vc_active” added to the second tab and second tab panel (and so on).

On page load (default):

• Tab 1: class .vc_tta-tab .vc_active
• Tab Content 1: class .vc_tta-panel .vc_active
• Tab 2 – 8: class .vc_tta-tab
• Tab Content 2 – 8: class .vc_tta-panel
• (Tab section below viewport at this point)

On click of id#menu-item-2 href=#tab-item-1:

• scroll to class .vc_tta-container
• Tab 1: remains class .vc_tta-tab .vc_active
• Tab Content 1: remains class .vc_tta-panel .vc_active
• Tabs 2 – 8: remain class .vc_tta-tab
• Tab Content 2 – 8: remain class .vc_tta-panel

Active tab Tab 1. On click of id#menu-item-3 href=#tab-item-2:

• scroll to class .vc_tta-container
• Tab 1: class .vc_tta-tab .vc_active —> remove .vc_active
• Tab Content 1: class .vc_tta-panel .vc_active —> remove .vc_active
• Tab 2: class .vc_tta-tab —> add .vc_active
• Tab Content 2: class .vc_tta-panel —> add .vc_active
• Tabs 3 – 8: remain class .vc_tta-tab
• Tab Content 3 – 8: remain class .vc_tta-panel

Active tab: Tab 2. On click of id#menu-item-9 href=#tab-item-8:

(or any other menu-item for that matter)

• scroll to class .vc_tta-container
• Tab 2: class .vc_tta-tab .vc_active —> remove .vc_active
• Tab Content 2: class .vc_tta-panel .vc_active —> remove .vc_active
• Tab 8: class .vc_tta-tab —> add .vc_active
• Tab Content 8: class .vc_tta-panel —> add .vc_active
• Tabs 1+ 3 – 7: remain class .vc_tta-tab
• Tab Content 1+ 3 – 7: remain class .vc_tta-panel

What I have so far: The scrolling to the tab-container and the different tabs/tab panels works fine, but classes “.vc_active” are not removed/added from/to “.vc_tta-tab” and “.vc_tta-panel”. I have fumbled with jQuery addClass and removeClass but unfortunately can’t get it to work.

Any help would be greatly appreciated. For jQuery-aficionados this is probably a simple task. Vanilla JS also an option.

This is what the site structure looks like. For the sake of simplicity I have only shown three primary menu items (incl. “Home”) and two tabs / tab panels (tab content).

<div class=“header-wrapper”>

    <!-- Main Menu -->
    <nav class="main-navigation" id="menu-primary-menu">
        <ul id="main-nav" class="navi">
            <li id="menu-item-1” class=" menu-item first">
                <a class="nav-link" href="#wrapper"><span>Home</span>
                </a>  <!-- back to “Home”, i.e. body #wrapper -->
            </li> 
            <li id="menu-item-2” class=" menu-item anchor”> 
            <!-- “.anchor” triggers smoothscroll -->
                <a class="nav-link" href=“#tab-item-1”><span>MenuItem2</span>
                </a> <!-- go to tab-item-1, tab-item-1 active on default -->
            </li> 
            <li id="menu-item-3” class=" menu-item anchor”>
                <a class="nav-link" href=“#tab-item-2”><span>MenuItem3</span>
                </a> <!-- go to tab-item-2 and make tab-item-2 active -->
            </li> 
        </ul>
    </nav>

</div> <!-- end header-wrapper -->


<section class=“content-wrapper”>

    <!-- Container Tabs and Tab Content (Panels) -->
    <div class="vc_tta-container">
        <div class="vc_general vc_tta vc_tta-tabs">


            <!-- Tabs -->
            <div class="vc_tta-tabs-container">
                <ul class="vc_tta-tabs-list">
                    <li class="vc_tta-tab vc_active" data-vc-tab=""> 
                    <!-- Active tab class “vc_active” on page load -->
                        <a href="#tab-item-1" data-vc-tabs="" data-vc-container=".vc_tta">
                            <span class="vc_tta-title-text">Tab Title 1</span>
                        </a>
                    </li>
                    <li class="vc_tta-tab" data-vc-tab="">
                        <a href="#tab-item-2” data-vc-tabs="" data-vc-container=".vc_tta">
                            <span class="vc_tta-title-text">Tab Title 2</span>
                        </a>
                    </li>
                </ul>
            </div> <!-- end vc_tta-tabs-container -->


            <!-- Tabs Content (Panels) -->
            <div class="vc_tta-panels-container">
                <div class="vc_tta-panels">
                    <div class="vc_tta-panel vc_active" id="tab-item-1" data-vc-content=".vc_tta-panel-body">Some Tab 1 panel content</div> 
                    <!-- Active tab panel class “vc_active” on page load -->
                    <div class="vc_tta-panel" id="tab-item-2” data-vc-content=".vc_tta-panel-body">Some Tab 2 panel content</div>
                </div> <!-- end vc_tta-panels -->
            </div> <!-- end vc_tta-panels-container -->


        </div> <!-- end vc_general vc_tta vc_tta-tabs -->
    </div> <!-- end vc_tta-container -->

</section> <!-- end content-wrapper -->