How can I hide the right hand sidebar when I am viewing a jira issue

Andrew Talaga October 17, 2017
I want to share my screen and have another browser window open with non jira content. So space is limited - I just want to focus on the jira description & hide both left and right sidebars. I can see how to hide the left but not the right sidebar. Any help is much appreciated!

9 answers

1 accepted

11 votes
Answer accepted
Orion Elenzil April 17, 2019

if you add a bookmark to your browser which "links" to the following javascript, then clicking on that bookmark will toggle Jira's right-hand sidebar off/on:

 


javascript: (function(){const e = document.getElementById('viewissuesidebar'); e.style.display=(e.style.display==='none' ? '' : 'none');})()


 

.. the forum software here is mangling the code above. awesome.

the ":" after "javascript" should be a regular colon like ":".

 

i'll try putting it here, not in a code-block:

javascript:(function(){const e = document.getElementById('viewissuesidebar'); e.style.display=(e.style.display==='none' ? '' : 'none');})()

 

nope same diff. 

 

Andrew Talaga April 23, 2019

Thanks a lot Orion - really appreciate your help!

boardtc
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
April 7, 2020

This works well but I needed to remove : and add an actual colon as the former gave an invalid url:

javascript:(function(){const e = document.getElementById('viewissuesidebar'); e.style.display=(e.style.display==='none' ? '' : 'none');})()

 

Nathaniel Holder January 26, 2021

The above didn't work for me with the new Jira issues view.  I modified it to use the following, which is working for me:

javascript:(function(){const e = document.querySelector("#jira-frontend > div.sc-kGXeez.dtCPvf > div > div.css-ld3atn > div.css-1f63klf > div > div > div.sc-dVhcbM.feaefy > div.sc-bhVptL.fMYuYl > div > div.sc-iupvsZ.dFHhoC > div.sc-fBuWsC.dNYYtH > div > div.sc-beROAQ.jFnPZr"); e.style.display=(e.style.display==='none' ? '' : 'none');})()
Kai Middleton April 14, 2021

The above no longer work.  Keep reading through this thread for an answer.

Sean Smith May 6, 2021

This currently works:

javascript: (function(){const e = document.querySelector("[data-test-id='issue.views.issue-details.issue-layout.right-most-column']").parentElement;e.style.display=(e.style.display==='none' ? '' : 'none');})()

Like # people like this
Jonna Rasmussen May 27, 2021

Thank you Sean! Works like a charm :-)

Diana Nadvikova July 11, 2023

Could you please provide more details on how to add this JS? I tried to add in bookmarks but it doesn't work. Thanks!

pjames42 October 30, 2023

This is the only code that worked for me as a bookmarklet:

javascript:(function(){const e = document.querySelector("[id='viewissuesidebar']");e.style.display=(e.style.display==='none' ? '' : 'none');})()

Replace the : at the beginning with a regular colon ":" before saving the bookmark.

Andreas Grill January 22, 2024

enter the code directly into the URL field of the bookmark (do not link to a js-file). (courtesy @Nathaniel Holder )

10 votes
b.rhodes@arkoselabs.com February 17, 2021

I can't believe this is the solution to this problem.
Why does Atlassian want to waste half of my screen on useless bs in the first place?

It's unbeleivable.

Athul Muralidhar April 7, 2021

exactly :/ It is a pity that the UX UI guys haven't picked this up and fixed this yet. It seems like we are now hacking our way around their product. Disappointed

Like # people like this
MrAtheist December 12, 2021

This is so archaic... i guess there are multiple versions of jira lying around so that people have to grab different ids? smh... For me i can confirm that this works but none of the other ones... 

I tried to do "document.querySelector('#viewissuesidebar')....." but for some reason the main div is gone too, not an expert in css and i aint got time to debug this ancient tech.

Sean Smith December 13, 2021

b.rhodes@arkoselabs.com It's the same reason Atlassian never comments in any meaningful way in these forums- they get a triple dose. You get to waste your screen, and you waste your time managing your screens (and using the compete and utter hacks presented here), and then you get to waste even more of your time buy typing out your issues here and being completely ignored.

And just remember- ignoring someone is the worst insult you can do. Isn't Atlassian lovely? 

4 votes
Gregor Kasmann_Actonic
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 17, 2017

Hi Andrew,

If you have an access to Announcement Banner configuration, you can try to put this script:

<script>
AJS.toInit(function () {
AJS.$("#viewissuesidebar").hide();
});
</script>

 If you are going to hide right panel only for you - try to use some browser extension to add custom script to pages. For example for Chrome https://chrome.google.com/webstore/detail/custom-javascript-for-web/poakhlngfciodnhlhhgnaaelnpjljija?hl=en

Andrew Talaga October 20, 2017

Thanks Gregor - much appreciated!

2 votes
Aleksandr Zuevich
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
October 17, 2017

Hi Andrew, you can use this: https://userstyles.org/styles/138944/jira-expand?view=openid
or create a custom field with javascript to hide viewissuesidebar div element.

Andrew Talaga October 20, 2017

Thanks Aleksandr - much appreciated!

1 vote
Prajnya Shukla March 24, 2021

Hi there,

I tried almost all the option provided above , but nothing is working for me. Or could be that I am not following the steps correctly. Could any one of you please provide me the exact step by step process ? please keep in mind I am not from a technical background.

I really appreciate your help. 

Cheers

Nathaniel Holder March 24, 2021

@Chris Wolf's code worked for me. Create a bookmark with the following as the URL, but replace "&colon;" with an actual full colon: 

javascript&colon;(function(){const e = document.querySelector("[data-test-id='issue.views.issue-details.issue-layout.right-most-column']").parentElement;e.style.display=(e.style.display==='none' ? '' : 'none');})() 
Like # people like this
Prajnya Shukla March 24, 2021

Awesome that worked. Thanks @Nathaniel Holder  and everyone. 

Cheers

Matt Kennedy May 7, 2021

Thanks @Nathaniel Holder, @Chris Wolf, et al. This solution is working for me as of right now.

Andreas Grill January 22, 2024

@Nathaniel Holder s explanation should make it to the top. You need to put the code directly into the URL field of the bookmark instead of linking to a js-file (as I did at first).

1 vote
Pavan Jammula September 30, 2020

It seems we no more have viewissuesidebar element.

I had to modify above selector to:

javascript&colon;(function(){const e = document.getElementsByClassName('sc-fwNAQS euqTza')[0]; e.style.display=(e.style.display==='none' ? '' : 'none');})()
Sam Mohyee October 27, 2020

unfortunately the class name you referenced doesn't appear on my issue view page either. Judging from the value I'm guessing its generated and not static, and will change, maybe depending on user or page load?

Jose Chavez November 19, 2020

I ran this JS script in the console, and it seems to work. That `div` has a definitive `data-test-id` attribute set that we can use to select it:

document.querySelector("[data-test-id='issue.views.issue-details.issue-layout.right-most-column']").parentElement.style.display = "none"
Like Jim likes this
Chris Wolf January 13, 2021

That's great - we can wrap that in a self-executing function Javascript block with Javascript URL scheme, as suggested by @orion elenzil :

javascript&colon;(function(){const e = document.querySelector("[data-test-id='issue.views.issue-details.issue-layout.right-most-column']").parentElement;e.style.display=(e.style.display==='none' ? '' : 'none');})()

Then add that URL as a bookmark. Note that you need to have a real colon rather then the entity, as rendered here.

Like # people like this
0 votes
Sean Smith November 28, 2023

The accepted anwer, and others here are old, or are using generated selectors. As long as Jira keeps using a testing framework this should work:

Thanks to my co-worker for pointing this out and suggesting using the hidden property to not have to use a variable.

Replace the HTML entity with a colon.

javascript&colon;(() => document.querySelector('[data-testid="issue.views.issue-details.issue-layout.container-right"]').hidden ^= !0 )();
0 votes
Kalina Kyurkchieva
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
November 27, 2023

This is working for me as of Nov 2023:

javascript:(function(){ const panel = document.querySelector('._12ji1r31._1qu2glyw._12y31o36._1reo1e7b._18m92qvy._u5f318bx._1ul91ll1._v5647jka'); if (panel) { panel.style.display = (panel.style.display === 'none' ? '' : 'none'); } })();

Sean Smith November 28, 2023

Thanks for the update Kalina! Works again. However, the selector you used it a generated selector which could change. Try this instead (thanks to my co-worker for pointing this out and suggesting using the hidden property to not have to use a variable).

javascript&colon;(() => document.querySelector('[data-testid="issue.views.issue-details.issue-layout.container-right"]').hidden ^= !0 )();

 

0 votes
42Chris May 18, 2021

The solution I found was https://snippi.com/s/6nqpmo9

A toggle button for hiding the Jira RHS panel.

 

This avoids the annoying issue with the Atlassian site here corrupting colons, as I tried to do the substitution, but failed despite a few attempts. What is it! Is my keyboard the wrong language? Is there more than one type of colon? was it a double colon needed? Or to replace &colon; with just colon? SO after more than half a dozen attempts, you need to accept it is probably a PICNIC error. So I went digging elsewhere.. and voila... snippi to the rescue. 

Thank you to Zach Morris for posting this code in another thread. Thank you!  

Chris Wolf May 18, 2021

This is standard substitution of certain unsafe characters with equivalent SGML character entities and is not a bug with Atlassian community board.  All you have to do is replace the character entity, "&colon;" with the single actual colon character.

BTW, the code in that snippet seems to depend on the nested structure of the HTML so if the nesting changes, then the code will break - you're better off selecting elements based on specific "id" attribute values.

Suggest an answer

Log in or Sign up to answer