Avatar of Focker513
Flag for United States of America

asked on 

Synchronize upper and lower tabs on a form

I have a tall form in which a user has access to three tabs on top and three corresponding tabs on the bottom.

I'm trying to write javascript\jquery to keep the tabs in sync(active) depending upon which is selected.

So here are my upper tabs:

<ul id="Tabs" class="nav nav-tabs">
        <li class="active"><a href="#pm" data-toggle="tab" id="pmTab">PM</a></li>
        <li><a href="#engineer" data-toggle="tab" id="engineerTab">Engineer</a></li>
        <li><a href="#contractor" data-toggle="tab" id="contractingTab">Contracting</a></li>

<div class="tab-content well"> .....

Open in new window

Here are my lower tabs
 <div id="BottomTabs" class="tabbable tabs-below">
            <ul id="TabsBelow" class="nav nav-tabs">
                <li class="active"><a href="#pm" data-toggle="tab" id="pmTabBottom">PM</a></li>
                <li><a href="#engineer" data-toggle="tab" id="engineerTabBottom">Engineer</a></li>
                <li><a href="#contractor" data-toggle="tab" id="contractingTabBottom">Contracting</a></li>

Open in new window

Now here are my click events
 function BindTabClickEvents() {
            $('#Tabs a, #TabsBelow a').click(function (e) {
                $(".nav-tabs li").each(function(element) {


                switch ($(this).html()) {
                    case "PM":
                        if (e.target.id === "pmTab") {
                        } else {
                    case "Engineer":
                       if (e.target.id === "engineerTab") {
                        } else {
                    case "Contracting":
                        if (e.target.id === "contractingTab") {
                        } else {


Open in new window

The case statement is assigning the "Active" class but the corresponding tab does not look "active". Also, the other tabs seem to be retaining the active class even after I iterate through them and remove it.

Avatar of undefined
Last Comment

8/22/2022 - Mon