diff --git a/README.md b/README.md index 0e34b32b6..36609a240 100644 --- a/README.md +++ b/README.md @@ -92,9 +92,11 @@ * [`getScrollPosition`](#getscrollposition) * [`getURLParameters`](#geturlparameters) * [`hasClass`](#hasclass) +* [`hide`](#hide) * [`httpsRedirect`](#httpsredirect) * [`redirect`](#redirect) * [`scrollToTop`](#scrolltotop) +* [`show`](#show) * [`toggleClass`](#toggleclass) @@ -1787,6 +1789,29 @@ hasClass(document.querySelector('p.special'), 'special'); // true [⬆ Back to top](#table-of-contents) +### hide + +Hides all the elements specified. + +Use the spread operator (`...`) and `Array.forEach()` to apply `display: none` to each element specified. + +```js +const hide = (...el) => [...el].forEach(e => (e.style.display = 'none')); +``` + +
+Examples + +```js +hide(document.querySelectorAll('img')); // Hides all elements on the page +``` + +
+ + +[⬆ Back to top](#table-of-contents) + + ### httpsRedirect Redirects the page to HTTPS if its currently in HTTP. Also, pressing the back button doesn't take it back to the HTTP page as its replaced in the history. @@ -1863,6 +1888,29 @@ scrollToTop(); [⬆ Back to top](#table-of-contents) +### show + +Shows all the elements specified. + +Use the spread operator (`...`) and `Array.forEach()` to clear the `display` property for each element specified. + +```js +const show = (...el) => [...el].forEach(e => (e.style.display = '')); +``` + +
+Examples + +```js +show(document.querySelectorAll('img')); // Shows all elements on the page +``` + +
+ + +[⬆ Back to top](#table-of-contents) + + ### toggleClass Toggle a class for an element. diff --git a/docs/index.html b/docs/index.html index 712fa0b44..4a72bb5c8 100644 --- a/docs/index.html +++ b/docs/index.html @@ -161,9 +161,11 @@ getScrollPosition getURLParameters hasClass +hide httpsRedirect redirect scrollToTop +show toggleClass

Date @@ -868,6 +870,13 @@ Pass location.search as the argument to apply to the current
hasClass(document.querySelector('p.special'), 'special'); // true
 
+

hide

+

Hides all the elements specified.

+

Use the spread operator (...) and Array.forEach() to apply display: none to each element specified.

+
const hide = (...el) => [...el].forEach(e => (e.style.display = 'none'));
+
+
hide(document.querySelectorAll('img')); // Hides all <img> elements on the page
+

httpsRedirect

Redirects the page to HTTPS if its currently in HTTP. Also, pressing the back button doesn't take it back to the HTTP page as its replaced in the history.

Use location.protocol to get the protocol currently being used. If it's not HTTPS, use location.replace() to replace the existing page with the HTTPS version of the page. Use location.href to get the full address, split it with String.split() and remove the protocol part of the URL.

@@ -898,6 +907,13 @@ Scroll by a fraction of the distance from the top. Use window.requestAnima
scrollToTop();
 
+

show

+

Shows all the elements specified.

+

Use the spread operator (...) and Array.forEach() to clear the display property for each element specified.

+
const show = (...el) => [...el].forEach(e => (e.style.display = ''));
+
+
show(document.querySelectorAll('img')); // Shows all <img> elements on the page
+

toggleClass

Toggle a class for an element.

Use element.classList.toggle() to toggle the specified class for the element.

diff --git a/snippets/hide.md b/snippets/hide.md new file mode 100644 index 000000000..82a02a4b0 --- /dev/null +++ b/snippets/hide.md @@ -0,0 +1,13 @@ +### hide + +Hides all the elements specified. + +Use the spread operator (`...`) and `Array.forEach()` to apply `display: none` to each element specified. + +```js +const hide = (...el) => [...el].forEach(e => (e.style.display = 'none')); +``` + +```js +hide(document.querySelectorAll('img')); // Hides all elements on the page +``` diff --git a/snippets/show.md b/snippets/show.md new file mode 100644 index 000000000..cf30be9b7 --- /dev/null +++ b/snippets/show.md @@ -0,0 +1,13 @@ +### show + +Shows all the elements specified. + +Use the spread operator (`...`) and `Array.forEach()` to clear the `display` property for each element specified. + +```js +const show = (...el) => [...el].forEach(e => (e.style.display = '')); +``` + +```js +show(document.querySelectorAll('img')); // Shows all elements on the page +``` diff --git a/tag_database b/tag_database index cf5a1a5b9..db0e12548 100644 --- a/tag_database +++ b/tag_database @@ -57,6 +57,7 @@ hammingDistance:math hasClass:browser head:array hexToRGB:utility +hide:browser httpsRedirect:browser initial:array initialize2DArray:array @@ -112,6 +113,7 @@ scrollToTop:browser sdbm:utility select:object shallowClone:object +show:browser shuffle:array similarity:array sleep:function