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 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?

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

 

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

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

Suggest an answer

Log in or Join to answer
Community showcase
Sarah Schuster
Posted Jan 29, 2018 in Jira

What are common themes you've seen across successful & failed Jira Software implementations?

Hey everyone! My name is Sarah Schuster, and I'm a Customer Success Manager in Atlassian specializing in Jira Software Cloud. Over the next few weeks I will be posting discussion topics (8 total) to ...

3,307 views 14 20
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
Atlassian Team Tour

Join us on the Team Tour

We're bringing product updates and pro tips on teamwork to ten cities around the world.

Save your spot