Bookmarklets

Toggle Element Visibility

bookmarklets Web Dev CSS

The Toggle Element Visibility bookmarklet is a powerful tool for web developers to quickly hide and show elements on any webpage. This tool is particularly useful for testing layouts, debugging visibility issues, and understanding how elements affect the overall design.

javascript:!function(){let n=!1,e=null,t=null,o=new Set;function i(){t&&(t.innerHTML=`\n            <div style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">\n                <strong>Toggle Element Visibility</strong>\n                <button onclick="this.closest('div').parentElement.remove()" style="background: none; border: none; font-size: 20px; cursor: pointer;">×</button>\n            </div>\n            <div style="margin-bottom: 10px;">\n                <button onclick="window.restoreAll()" \n                        style="width: 100%; padding: 8px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">\n                    Restore All Elements\n                </button>\n            </div>\n            <div style="margin-bottom: 10px;">\n                <strong>Hidden Elements (${o.size}):</strong>\n            </div>\n            <div style="max-height: 300px; overflow-y: auto;">\n                ${Array.from(o).map((n=>`\n                    <div style="margin-bottom: 8px; padding: 8px; background: #f5f5f5; border-radius: 4px;">\n                        <div style="margin-bottom: 4px;">\n                            <strong>Element:</strong> ${function(n){const e=[];for(;n&&n.nodeType===Node.ELEMENT_NODE;){let t=n.nodeName.toLowerCase();n.id?t+=`#${n.id}`:n.className&&(t+=`.${n.className.split(" ").join(".")}`),e.unshift(t),n=n.parentNode}return e.join(" > ")}(n.element)}\n                        </div>\n                        <div style="font-size: 12px; color: #666;">\n                            Original Display: ${n.originalDisplay||"block"}\n                        </div>\n                    </div>\n                `)).join("")}\n            </div>\n        `)}function s(s){if(!n)return;s.preventDefault(),s.stopPropagation();const l=s.target;l!==e&&l!==t&&l!==r&&function(n){const e="none"!==n.style.display,t=n.style.display;e?(n.style.display="none",o.add({element:n,originalDisplay:t})):(n.style.display=t||"block",o.delete(n)),i()}(l)}const r=document.createElement("div");r.style.cssText="\n        position: fixed;\n        top: 20px;\n        right: 20px;\n        padding: 15px;\n        background: white;\n        border-radius: 8px;\n        box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n        z-index: 10002;\n        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n        pointer-events: auto;\n    ",r.innerHTML='\n        <div style="margin-bottom: 10px;">\n            <strong>Toggle Element Visibility</strong>\n            <button onclick="this.parentElement.parentElement.remove()" style="float:right;margin-left:10px;">×</button>\n        </div>\n        <div style="margin-bottom: 10px;">\n            <button onclick="window.startToggling()" \n                    style="width: 100%; padding: 8px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">\n                Start Toggling\n            </button>\n        </div>\n        <div style="font-size: 12px; color: #666;">\n            Click any element to toggle its visibility\n        </div>\n    ',window.startToggling=function(){n||(n=!0,e=document.createElement("div"),e.style.cssText="\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.1);\n            z-index: 10000;\n            cursor: pointer;\n            pointer-events: none;\n        ",document.body.appendChild(e),t=document.createElement("div"),t.style.cssText="\n            position: fixed;\n            background: white;\n            padding: 15px;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            z-index: 10001;\n            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n            display: none;\n            min-width: 200px;\n            pointer-events: auto;\n        ",document.body.appendChild(t),i(),document.addEventListener("click",s))},window.restoreAll=function(){o.forEach((n=>{n.element.style.display=n.originalDisplay||"block"})),o.clear(),i()},document.body.appendChild(r)}();
Drag me to bookmark bar: 👉🏻 Toggle Element Visibility

Why Use Toggle Element Visibility?

The Toggle Element Visibility bookmarklet is essential for developers who need to:

Features

  1. Interactive Element Selection

    • Click any element to toggle its visibility
    • Visual feedback when hovering over elements
    • Maintains original display property for accurate restoration

  2. Comprehensive Element Information

    • Shows element path for easy identification
    • Displays original display property
    • Lists all currently hidden elements

  3. Easy Restoration

    • Restore individual elements by clicking again
    • Restore all elements with a single button click
    • Maintains original display properties

  4. User-Friendly Interface

    • Clean, modern design
    • Clear instructions
    • Easy to close and remove

How to Use

  1. Click the bookmarklet to activate the tool
  2. Click the "Start Toggling" button in the control panel
  3. Click any element on the page to toggle its visibility
  4. View the list of hidden elements in the info box
  5. Click elements again to restore them
  6. Use the "Restore All Elements" button to show all hidden elements
  7. Click the × button to close the tool

Best Practices