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>
    </ul>

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

Open in new window

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>

Open in new window

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');
            });
        }

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.

Scott Fell

Can you create a working sample? Either a minimal sample page on your own site or recreate on jsbin, jsfiddle or codepen.

Just as a quick suggestion, on the click event the first thing you can do is make all inactive, then only make the clicked tab active.

Focker513

ASKER

Sorry been pulled into another issue. I will try to update with jsfiddle later. If you look I am iterating through and removing active so you are saying also add inactive? That actually may be what I need to try.

Regardless can't test at the moment but will get back to you. I apologize, thanks for your time.

Scott Fell

Here is a simple example where I remove the class on click, then add to the specific item.
http://jsbin.com/cuzoruceve/edit?html,output

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.0.3.js"></script>
  <script>
    $(function(){
       $('ul#top li').on('click',function(){
          $('ul#top li').removeClass('red');
          $(this).addClass('red');
 
          });
  
    });
  </script>
  <style>
    .red{color:Red;}
    .blue{color:Blue;}
  </style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
   <ul id="top">
     <li>one</li>
     <li>two</li>
     <li>three</li>
   </ul>
   <ul id="bottom">
     <li>one</li>
     <li class="blue">two</li>
     <li>three</li>
   </ul>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Roonaan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Focker513

ASKER

awesome worked without issue