How to show/hide tabs in a transition screen with multiple tabs?

Smruti1

I have a case wherein I have a screen with 6 tabs. I will have to show 1 or 2 tabs depending on conditions. I am trying to show/ hide tabs using AJS.$("a[href='#tab1']").closest("li").hide() or show().

The problem I am facing is that suppose I hide tab1, the tab gets hidden in the menu-item but the contents don't go. Effectively, it shows tab2 and the contents of tab1. Only when I click on tab2 do the contents of tab1 go away.

Also please note, I am trying to make this javascript work on a transition screen.

Is there a solution to this?

Smruti1

This code worked for me.

var tab1      = AJS.$("a[href='#tab1']").closest("li");
var tab2      = AJS.$("a[href='#tab2']").closest("li");
var tab3      = AJS.$("a[href='#tab3']").closest("li");
var tab4      = AJS.$("a[href='#tab4']").closest("li");
var tab5      = AJS.$("a[href='#tab5']").closest("li");
var tab6      = AJS.$("a[href='#tab6']").closest("li");
tab1.hide();
tab2.hide();
tab3.hide();
tab4.hide();
tab5.hide();
tab6.show();
showTab(6);

function showTab(tabId)
{			
   for(i = 1; i <= 6; i++)
   {
       var tableObject = document.getElementById('tab' + i);				
       if(tableObject)
       {
          if (i == tabId)
          {
             tableObject.style.display = 'table';
          }
          else
          {
             tableObject.style.display = 'none';
          }
       }
   }
}