troubleshooting Question

Synchronize upper and lower tabs on a form

Avatar of Focker513
Focker513Flag for United States of America asked on
JavaScriptjQueryHTML
5 Comments1 Solution131 ViewsLast Modified:
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>
    </ul>

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


Here are my lower tabs
...</div>
 <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>
            </ul>
        </div>

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

                $(this).addClass("active");
               

                switch ($(this).html()) {
                    case "PM":
                       
                        if (e.target.id === "pmTab") {
                            $('#pmTabBottom').addClass("active");
                        } else {
                            $('#pmTab').addClass("active");
                        }
                        break;
                    case "Engineer":
                       if (e.target.id === "engineerTab") {
                            $('#engineerTabBottom').addClass("active");
                        } else {
                            $('#engineerTab').addClass("active");
                        }
                        break;
                    case "Contracting":
                        $('#programNameContracting').html($("#ProgramName").val());
                        if (e.target.id === "contractingTab") {
                            $('#contractingTabBottom').addClass("active");
                        } else {
                           $('#contractingTab').addClass("active");
                        }
                        break;
                }

                $(this).tab('show');
            });
        }

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.
ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros