diff --git a/src/assets/img/hide-elements-polypane.png b/src/assets/img/hide-elements-polypane.png new file mode 100644 index 00000000..2df27b58 Binary files /dev/null and b/src/assets/img/hide-elements-polypane.png differ diff --git a/src/tips/en/hide-elements.md b/src/tips/en/hide-elements.md index e41addb0..4c6d45d2 100644 --- a/src/tips/en/hide-elements.md +++ b/src/tips/en/hide-elements.md @@ -2,7 +2,7 @@ date: 2024-06-12 authors: Patrick Brosset title: Hide elements from the page, without changing the layout -tags: ["tip", "personalization", "css", "browser:edge", "browser:chrome", "browser:firefox"] +tags: ["tip", "personalization", "css", "browser:edge", "browser:chrome", "browser:firefox", "browser:polypane"] see-also: ["remove-annoying-overlays.md"] --- In the DevTools' **Elements** (or **Inspector**) tool, you can delete nodes from the DOM tree by selecting them in the tool and then pressing Delete or Backspace. While this is great to completely remove the elements and make others take more space for example, it can also break the CSS layout of the page. @@ -18,7 +18,7 @@ To hide an element without removing it from the DOM tree, in DevTools: 1. Go to the **Elements** tool (called **Inspector** in Firefox). 1. Select the element you want to hide. - * Either from the poage, by right-clicking on it and selecting **Inspect**. + * Either from the page, by right-clicking on it and selecting **Inspect**. * Or from the tool, by finding and clicking on the element in the DOM tree. 1. Press H on your keyboard. @@ -28,3 +28,11 @@ To hide an element without removing it from the DOM tree, in DevTools: To show the element again, make sure it's selected in the **Elements**/**Inspector** tool, and press H again. ![Chrome with DevTools opened, showing how pressing H hides elements from the page](../../assets/img/hide-elements.png) + +### In Polypane + +1. Select the element you want to hide in the **Elements** panel. +1. Click the **Eye** button in the toolbar. It will go from an open eye to a closed eye. +1. Click it again to show the element again. + +![Polypane with the Elements panel opened, showing how Clicking the eye icon hides elements from the page](../../assets/img/hide-elements-polypane.png) \ No newline at end of file