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

  1. Julien says:

    Just an add, doesn’t work for me with “DetailsPageX” but with “TabbedFolderPageX”.

    Thanks a lot for the tip !

  2. Julien says:

    Basically it is {Name of Tabbed Folder}Page{Number of the tab – 1}

  3. Dan Hutson says:

    Hello

    I’ve been racking my brains over this and can’t find a way of making this work.

    Once I’ve unhidden the relevant tabbed folder pages I then want to change the focus to a newly visible tab. I’ve found the TabSelect() function in the CustomControls.js but not sure how to manually trigger it in my custom script.

    Any ideas?

    Thanks

    Dan

    • Dan Hutson says:

      Turns out it was pretty easy!

      tabName = {Name of Tabbed Folder}Page{Number of the tab – 1}


      function selectTab(tabName) {
      var tab = document.getElementById(tabName);
      if(tab !== null) {
      TabSelect(tab);
      }
      }

Leave a Reply to admin Cancel reply

Your email address will not be published. Required fields are marked *