How To Easily Add A Spoiler Button To Your Webpage
I created a spoiler button to toggle hidden text for my (old) blog, I thought I would share the code here. Included is a version that can be inserted into a HTML file for anyone who may want to use a copy and paste version.
I was reluctant to import this to Medium, as the code isn’t very well written, but I decided to keep it around for funsies; plus it does work, which is the main point.
This a pretty short post. I’ve wanted to find time to make a spoiler button to hide text when I post uh…. a spoiler. It’s probably not necessary, but I like to do my part to keep the Internet spoiler free (you’re welcome world).
Here’s a codepen of what that script looks like.
Pretty simple to set it up, I think it’s fairly self-explanatory. Although, I do like to explain how my code works, it’s been a long day and I don’t have enough beer to keep me interested in typing a long post. If you have any questions, definitely feel free to comment below and I’ll be sure to get back to you as soon as I can.
As promised though, I will give a quick explanation on how to add this to a HTML file. All the following bits of code can be put directly into the HTML file where you will be using the spoiler button.
Create The Button
Simply copy the code bellow and paste into your HTML file where you want the button to appear.
<button id=”spoiler_button” name=”spoiler_button” type=”button”> Toggle Spoilers
</button>This button will look very bland unless you add some CSS to style it. If you’re not very good at button design (like me!), you can use this button generator.
Surround The Text With Div Tags
The next step is to surround all the text you want to hide with div tags, add an id and make sure to include style="display:none;", like so:
<div id=”spoiler_text” style=”display: none;”> Anything you want to hide goes in here. </div>When you load your page, anything nested in that div will not be displayed. Now the only thing left to do is include the script that will make the button do what it’s supposed to do.
The Script Of Revealing
The last step to make this work is to include the following script in the body of your HTML file. It must be the last thing before the closing body tag because it has to be the last thing to load on the page. If this script is loaded before the rest of the page, it may cause some unwanted errors. Just copy and paste the following; be sure to include the opening and closing script tags.
<script>
var divToggleVis = document.getElementById('spoiler_text');
var button = document.getElementById('spoiler_button');
button.onclick = function() {
if (divToggleVis.style.display === 'none') {
divToggleVis.style.display = 'block';
} else {
divToggleVis.style.display = 'none';
}
};
</script>That’s all there is. If you have any questions or thoughts on improving this code, don’t hesitate to comment below.
A quick note to add here: If you use the method above your button will work a bit different from the one I am using as I added some extra transitions and styling to mine.
Originally published at trujared.com on August 27, 2017.
