nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

Accepted answers

Orion Elenzil_60xosw

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&colon; (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 "&colon;" after "javascript" should be a regular colon like ":".

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

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

nope same diff.

All comments

Aleksandr Zuevich_6f4k0z

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.

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 Aleksandr - much appreciated!

Andrew Talaga

Thanks Gregor - much appreciated!

Orion Elenzil_60xosw

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&colon; (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 "&colon;" after "javascript" should be a regular colon like ":".

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

javascript&colon;(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 &colon; and add an actual colon as the former gave an invalid url:

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

Pavan Jammula

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

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_pafdvg

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_r233a3

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.

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

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.

Prajnya Shukla_ngqda7

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

@[deleted]'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');})()

Prajnya Shukla_ngqda7

Awesome that worked. Thanks @Nathaniel Holder and everyone.

Cheers

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

Matt Kennedy_29bff6

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

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 &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_r233a3

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.

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_wace6d

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?

Kalina Kyurkchieva

This is working for me as of Nov 2023:

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

Sean Smith_wace6d

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

Sean Smith_wace6d

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

Marcelo Lourenço_310kdd

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.

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.

Colin Starker

This only produces a blank white page.

Kristian Partl

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

Sean Smith_wace6d

Try this @Colin Starker :

javascript&colon;(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); } })();

Michael Mussato

Marcelo = Hero.

@atlassian : This is embarrassing.

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.

Ted Mead

Am I missing something (not unusual I'm sorry to say)? Back in April 2021 someone posted their surprise that Jira (almost typed Jura - that's my coffee machine) hasn't addressed this issue. Is it that hard to add a button to show/hide the panel as with the left panel?