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

[Smruti]

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?

[Smruti · Accepted solution]

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

[Steven Lam]

Hi Smruti,

I'm finding for loops in javascript listed under any custom field description / announcement banner doesn't really work properly. As in, it seems to just run the last iteration of the for loop. Have you encountered this anywhere?

Lastly, where did you place your code?

[RambanamP]

the following code is working for me

<script type="text/javascript"> 
JIRA.ViewIssueTabs.onTabReady(function() {
hideTab();   
})
function hideTab(){
	if(condition){
	//to show the tab
		AJS.$('#tab-1').show(); 
		AJS.$("a[href='#tab-1']").closest("li").show();
	}else{ 
	//to hide the tab
		AJS.$('#tab-0').hide(); 
		AJS.$("a[href='#tab-0']").closest("li").hide();
	}
}
 
</script>

[Smruti]

Unfortunately, it didn't work for me. Are you sure it renders all your tabs properly? Please try with 4-5 tabs. Although tab0 gets hidden and all contents of tab1 are visible, contents of tab1 are also visible in tab2 and tab3 if I execute the above code.

[RambanamP]

cna you share your code ?

[Smruti]

Hi Rambanam,

I got my answer and am posting the same. Thanks a lot for your answers.

Regards,

Smruti

[RambanamP]

Glad to hear it worked!!

[Manojkumar V]

Please pardon for asking basic question. Could you please let me know where can I fit in the javascript?. I don't see an option to provide scripts in Edit/Configure options for screen.

[Teju Naik]

Hi Rambanam,

Where to add screen id in that above script i.e. screen id is '#aui-uid-3'.

Please need help on this

[RambanamP]

what tabs you are speaking about ? can you share the screen shot?

[Smruti]

I am talking of field-tabs which can be added to screens.