How to hide tabs in tabbed window

What I have been talking about the past few days can be seen on the screen-shots:

One of the screens has “Internal” option selected and loads less details requested. The other screen-shot shows “External” option and with loads more fields on the screen. This is the same screen, only bits hidden via Custom Script in HR.Net.

Notice how on the bottom part of the screen most of the tabs are not displayed for internal candidate? There is no standard function for this, so I had to do a bit of research.

It turned out that these buttons do not have proper names, so there would be a little game of guess a name. Good thing, tab headers are named after the tab area: “TabAreaName0”, “TabAreaName1”, “TabAreaName3”, etc. And the numbers seemed like in the proper order.
I had to hide a few tabs, so my function works with array of names:

var tabs = ["DetailsPage1", "DetailsPage2", "DetailsPage8"];

//Use this to hide tabs
display_tabs(tabs, 'none');

// use this to display hidden tabs
display_tabs(tabs, 'inline');

/**
* This function shows or hides tabs on tabulated area.
* @param tabsArray array with strings - names of tabs.
* @param style - string with style to apply. Can be 'none' or 'inline'
*/
function display_tabs(tabsArray, style){
  var tab
  for (var i = 0; i < tabsArray.length; i++){
    tab = document.getElementById(tabsArray[i]);
    if (tab != null)  tab.style.display = style;  
  }
}
This entry was posted in Uncategorized and tagged , , , . Bookmark the permalink.

5 Responses to How to hide tabs in tabbed window

Leave a Reply

Your email address will not be published.