Last active
January 19, 2023 19:05
-
-
Save Snarp/7c9b1fcf090e8fa6b139ffce621770d0 to your computer and use it in GitHub Desktop.
Javascript spoilers hide-and-show. Leaves spoiler text visible if Javascript isn't enabled.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <style> | |
| .spoiler-hidden { background-color: gray; color: gray; cursor: pointer; } | |
| </style> | |
| </head> | |
| <body> | |
| <p class="spoiler">CONTENT FLAGS: Clowns, Rich People, Extended Sounds Of Brutal Pipe Murder</p> | |
| <div class="spoiler again">Here's another spoiler-protected item.</div> | |
| </body> | |
| <script type="text/javascript"> | |
| // If Javascript is enabled, this code will gray out all text in elements of | |
| // class 'spoiler', allowing the user to click the grayed-out block to make | |
| // it visible. | |
| var spoilers = document.querySelectorAll(".spoiler"); | |
| for (let spoiler of spoilers) { | |
| spoiler.classList.add('spoiler-hidden'); | |
| spoiler.onclick = function() { this.classList.remove('spoiler-hidden'); } | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment