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

[Andrew Talaga]

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!

[Orion Elenzil · Accepted solution]

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]

Thanks a lot Orion - really appreciate your help!

[boardtc]

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]

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]

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

[Sean Smith]

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

[Jonna Rasmussen]

Thank you Sean! Works like a charm :-)

[Diana Nadvikova]

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]

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]

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

[b.rhodes@arkoselabs.com]

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]

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

[MrAtheist]

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]

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? 

[Marcelo Lourenço]

To collapse/expand the right Jira pane. Freeing up more space in the main panel, I created an extension for Chrome. It will be useful until they implement this function in Jira.

https://chromewebstore.google.com/detail/occanfpdiglllenbekgbnhijeoincilf

[Gajog TV]

Great. tks

[Daniel Fuentes]

Thank you Marcelo for doing the Job Atlassian can't do.

[Michael Mussato]

Marcelo = Hero.

@atlassian : This is embarrassing.

[Gregor Kasmann_Actonic]

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]

Thanks Gregor - much appreciated!

[Aleksandr Zuevich]

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]

Thanks Aleksandr - much appreciated!

[Prajnya Shukla]

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]

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

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

[Prajnya Shukla]

Awesome that worked. Thanks @Nathaniel Holder  and everyone. 

Cheers

[Matt Kennedy]

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

[Andreas Grill]

@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).

[Colin Starker]

This no longer works.

[Sean Smith]

This works for me as of Aug 2024. Note there is no dash in the id (data-testid not data-test-id):

javascript:(function(){ const panel = document.querySelector('[data-testid="issue.views.issue-details.issue-layout.container-right"]'); if (panel) { panel.style.display = (panel.style.display === 'none' ? %27%27 : %27none%27); } })();

[Colin Starker]

Now it's working. Thanks. There was a typo in the original script.

[Pavan Jammula]

It seems we no more have viewissuesidebar element.

I had to modify above selector to:

javascript:(function(){const e = document.getElementsByClassName('sc-fwNAQS euqTza')[0]; e.style.display=(e.style.display==='none' ? '' : 'none');})()

[Sam Mohyee]

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]

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"

[Chris Wolf]

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

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

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

[Lincoln Yesire]

I create an extension to hide/show the right hand sidebar(or called panel)，maxmize the create issue dialog.You can toggle the status of right hand sidebar or create issue dialog by clicking the extension icon in corresponding view. In addition, the default keyboard shortcurt is CTRL+B (you can set the shortcut as your willing by extension manager). 

chrome: Better Jira Browse - Chrome Web Store (google.com)

edge: Better Jira Browse - Microsoft Edge Addons

Contact with me if you have any problem when you use the extension.

[Kristian Partl]

You can use  Tampermonkey script which will add you an button for that.
Tampermonkey Script: Button that will allow you to collape right sitebar in Jira issue view (github.com)

[Colin Starker]

Doesn't work.

[Kristian Partl]

@Colin Starker which version of Jira you're using?

[Sean Smith]

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:(() => document.querySelector('[data-testid="issue.views.issue-details.issue-layout.container-right"]').hidden ^= !0 )();

[Colin Starker]

This only produces a blank white page.

[Sean Smith]

Try this @Colin Starker :

javascript:(function(){ const panel = document.querySelector('[data-testid="issue.views.issue-details.issue-layout.container-right"]'); if (panel) { panel.style.display = (panel.style.display === 'none' ? %27%27 : %27none%27); } })();

[Kalina Kyurkchieva]

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]

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:(() => document.querySelector('[data-testid="issue.views.issue-details.issue-layout.container-right"]').hidden ^= !0 )();

[42Chris]

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 : 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]

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, ":" 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.