I would like to gain some screen estate when viewing Stack Exchange sites. The sidebar seldom shows information I need.

  • I know most help content displayed when composing questions.
  • Most related answers are found by the same search that already brought me to the question I am currently viewing, so I already have them open in other browser tabs anyways.
  • Hot Network Questions always distracts me to scifi.

I know there is a userstyle to hide the Hot Network Questions and one that completely removes the sidebar leaving an ugly hole where it once was. Is it possible to hide it and have the question, list, or whatever content takes the main part of the page expand to claim its place?


Okay, the following Stylish style should be a good start.

You can also see / install it at userstyles.org.

@namespace url(http://www.w3.org/1999/xhtml);

    domain("askubuntu.com"), domain("mathoverflow.net"), domain("serverfault.com"), domain("stackapps.com"),
    domain("stackexchange.com"), domain("stackoverflow.com"), domain("superuser.com")
    #sidebar {
        display:                none !important;
    #mainbar, .mainbar, #questions, .question-summary, #answers, .answer {
        min-width:              728px !important;
        width:                  100% !important;
    .summary {
        min-width:              630px !important;
        width:                  calc(100% - 120px) !important;
    .question > table {
        width:                  100% !important;
    .post-text, .wmd-preview, .post-editor, .wmd-input {
        min-width:              660px !important;
        width:                  100% !important;
    .wmd-button-bar {
        min-width:              634px !important;
        width:                  100% !important;


  • This has not been extensively tested and only on Firefox, but it should work with stylish for Chrome, Opera, etc. too.
  • I don't use this style. Support for this low demand functionality will be limited.
  • That is a very good start. On the question pages, it does exactly what I want. Other pages are still slightly misformatted. Would you be willing to post it on e.g. GitHub? This would make it easier to point to the places it still lacks and improve upon it. – XZS Oct 30 '15 at 12:35

and this too: StackOverflow CodeBox Options



I made a userscript that allows the user to toggle the visibility of the sidebar (the userscript's source code is also on GitHub):

// ==UserScript==
// @name         Toggle the right sidebar
// @version      0.4
// @author       double-beep
// @include      /^https://(?:[^/]+\.)?(?:(?:stackoverflow|serverfault|superuser|stackexchange|askubuntu|stackapps)\.com|mathoverflow\.net)/(questions/\d+/|review/*)
// @exclude      /^https://*.*/review/(suggested-edits|reopen)/*
// @exclude      /^https://*.*/review($|.*/(history|stats)$)
// @updateURL    https://github.com/double-beep/my-userscripts/raw/master/toggleSidebar.user.js
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function($) {
  $('.-secondary').append('<li class="-item"><a class="-link" id="hide-sidebar" title="Toggle visibility of right sidebar">&#10095;</a></li>');

  function defineOnClick() {
    const sidebar = $('#sidebar, .sidebar'), mainbar = $('#mainbar, .mainbar');
    $(document).on('click', '#hide-sidebar', function() {
      if (sidebar.is(':visible')) {
        mainbar.animate({'width': '100%'}, 200);
      } else {
        mainbar.css('width', 'calc(-324px + 100%)');
  if (window.location.pathname.match(/\/questions\/\d+/)) defineOnClick();

  var origOpen = XMLHttpRequest.prototype.open;
  XMLHttpRequest.prototype.open = function() {
    this.addEventListener('load', () => {
      if (this.responseURL.match(/\/review\/(next-task|task-reviewed)/)) defineOnClick();
    origOpen.apply(this, arguments);

The button is in the menu bar:

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .