Toggle sidebars to reclaim screen space across the web!
// ==UserScript==
// @name JSfiddle SIDEBAR collapser
// @namespace http://tampermonkey.net/
// @version 1.2
// @description Toggle sidebars to reclaim screen space across the web!
// @author You
// @license MIT
// @match https://jsfiddle.net/*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// ==/UserScript==
(function() {
'use strict';
function create_element(type, content, attr, styles) {
if (!type) return;
const newElem = document.createElement(type);
if (attr) {
Object.entries(attr).forEach(([key, value]) => {
newElem.setAttribute(key, value);
});
}
if (styles) {
Object.entries(styles).forEach(([key, value]) => {
newElem.style[key] = value;
});
}
if (content) {
newElem.innerHTML = content;
}
return newElem;
}
let attempts = 0;
function initToggler() {
// --- Prevent Duplicate Buttons ---
if (document.getElementById("fixed-toggle-btn")) return;
const sidebar = document.querySelector("#sidebar");
const content = document.querySelector("#content");
// If elements aren't found, check a few times in case it's an SPA loading dynamically
if (!sidebar || !content) {
attempts++;
if (attempts < 15) { // Stop checking after ~3 seconds if elements don't exist
setTimeout(initToggler, 200);
}
return;
}
// --- Create Button ---
const toggleBtn = create_element(
"button",
"☰",
{ id: "fixed-toggle-btn" },
{
position: "fixed",
top: "20px",
left: "20px",
zIndex: "9999",
width: "45px",
height: "45px",
border: "1px solid rgba(0, 0, 0, 0.15)",
borderRadius: "12px",
backgroundColor: "rgba(0, 0, 0, 0.06)",
backdropFilter: "blur(8px)",
color: "#ffffff",
fontSize: "20px",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
boxShadow: "0 4px 15px rgba(0, 0, 0, 0.05)",
transition: "all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1)",
outline: "none"
}
);
document.body.appendChild(toggleBtn);
// --- Animations & Hover States ---
toggleBtn.addEventListener("mouseenter", () => {
toggleBtn.style.backgroundColor = "rgba(0, 0, 0, 0.12)";
toggleBtn.style.transform = "scale(1.08) translateY(-2px)";
toggleBtn.style.boxShadow = "0 6px 20px rgba(0, 0, 0, 0.1)";
});
toggleBtn.addEventListener("mouseleave", () => {
toggleBtn.style.backgroundColor = "rgba(0, 0, 0, 0.06)";
toggleBtn.style.transform = "scale(1) translateY(0)";
toggleBtn.style.boxShadow = "0 4px 15px rgba(0, 0, 0, 0.05)";
});
toggleBtn.addEventListener("mousedown", () => {
toggleBtn.style.transform = "scale(0.95)";
});
toggleBtn.addEventListener("mouseup", () => {
toggleBtn.style.transform = "scale(1.08) translateY(-2px)";
});
// --- Toggle Logic ---
let isToggled = false;
toggleBtn.addEventListener("click", () => {
const currentSidebar = document.querySelector("#sidebar");
const currentContent = document.querySelector("#content");
if (!currentSidebar || !currentContent) return;
isToggled = !isToggled;
if (isToggled) {
toggleBtn.style.borderColor = "rgba(0, 0, 0, 0.3)";
toggleBtn.style.backgroundColor = "rgba(0, 0, 0, 0.18)";
// Hide sidebar horizontally and force content to span all grid tracks
currentSidebar.style.display = "none";
currentContent.style.gridColumn = "1 / -1";
currentContent.style.width = "100%";
} else {
toggleBtn.style.borderColor = "rgba(0, 0, 0, 0.15)";
toggleBtn.style.backgroundColor = "rgba(0, 0, 0, 0.06)";
// Revert back to original layout definitions
currentSidebar.style.display = "";
currentContent.style.gridColumn = "";
currentContent.style.width = "";
}
});
}
// Run layout checker
initToggler();
})();