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

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?

4 answers

1 accepted

This widget could not be displayed.
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';
          }
       }
   }
}

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?

This widget could not be displayed.

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>

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.

cna you share your code ?

Hi Rambanam,

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

Regards,

Smruti

Glad to hear it worked!!

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.

Hi Rambanam,

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

Please need help on this

 

This widget could not be displayed.

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

This widget could not be displayed.

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

Suggest an answer

Log in or Sign up to answer
Atlassian Summit 2018

Meet the community IRL

Atlassian Summit is an excellent opportunity for in-person support, training, and networking.

Learn more
Community showcase
Posted Wednesday in New to Jira

Are you planning to trial, or are currently trialling Jira Software? - We want to talk to you!

Hello! I'm Rayen, a product manager at Atlassian. My team and I are working hard to improve the trial experience for Jira Software Cloud. We are interested in   talking to 20 people planning t...

262 views 5 0
Join discussion

Atlassian User Groups

Connect with like-minded Atlassian users at free events near you!

Find a group

Connect with like-minded Atlassian users at free events near you!

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you