Blogging covers many topics including Movies, Books or other mediums where readers may not be ready for all of the details just yet. In times like those it's handy to provide a safe browsing experience so a visitor can choose whether to read a certain detail or not. That's where this handy script and CSS come in.
Easily Add Spoiler Blocks and Inline Text
Spoiler blocks are simple, until a reader takes an action the information is hidden. It's up to them what they do and do not see. I've written a short script using JQuery with the basic styles necessary to make things work. Once these components are added to a blog it's a simple process to include hidden spoilers within posts. Include the below script includes and CSS in your template <head> block to make it work.
The styles included are simple and basic, feel free to customize the look to your liking. Also, if you're already using JQuery and it's included elsewhere omit the first line. Once this code is added to your site you have access to three separate types of spoiler. Below are live examples and the code used to generate each.
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://jsblogstop-blogger-feed-tools.googlecode.com/svn/trunk/js-spoilers.js"></script>
<style type='text/css'>
.block-spoiler { color: #993333; }
.block-spoiler-toggle { cursor: pointer;}
.inline-spoiler-toggle { cursor: pointer;}
.redac-text {
color: #000000;
background-color: #000000;
}
.redac-text:hover {
background-color: #ffffff;
}
div.spoiler-text {
display: none;
padding: 0px 10px;
}
span.spoiler-text {
display: none;
padding: 0px 5px;
}
</style>
Block Spoilers are created by wrapping the spoiler in a div of class spoiler-text. The included script then adds a spoiler label and a Show/Hide text that when clicked exposes or hides the spoiler. Block spoilers may even be used with rich content such as videos or photographs.
Block Spoiler Example:Inline Spoilers work almost the same as Block spoilers only instead of a div, a span tag is used. This time my script inserts the Show/Hide graphic text that when clicked makes the spoiler visible or not. Inline spoilers are best used for short snippets within a series of text.
<div class='spoiler-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a fermentum tortor. Etiam ornare tempor imperdiet. Nulla iaculis dictum lectus.</div>
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a fermentum tortor. Etiam ornare tempor imperdiet. Nulla iaculis dictum lectus.
Inline Spoiler Example:Redacted Spoilers use CSS to make the enclosed text appear invisible by setting the background to the same color as the text. Once a user puts their mouse over this area, the CSS rules change the background so a visitor may read the text. You may use this style on most tags, I've included a span tag example as I think it's the most likely use of this method.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class='spoiler-text'>Nam a fermentum tortor. Etiam ornare tempor imperdiet.</span> Nulla iaculis dictum lectus.
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a fermentum tortor. Etiam ornare tempor imperdiet. Nulla iaculis dictum lectus.
Redacted Spoiler Example:Conclusion
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<span class='redac-text'>Nam a fermentum tortor. Etiam ornare tempor imperdiet.</span> Nulla iaculis dictum lectus.
Result:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a fermentum tortor. Etiam ornare tempor imperdiet. Nulla iaculis dictum lectus.
Inclusion of Spoiler functionality to a website is a fairly simple process. Add the provided script and CSS, then use the appropriate div or span tag of the proper class around the spoiler. This gives readers the option to learn something new about the topic at hand or leave it for later to be discovered in their own time. Don't spoil your readers fun by using this easy script and tag system. Give it a try and please let me know if you have any questions or problems.
17 comments :
The block spoilers feature is exactly what I was looking for when I went asking for help. But I must be doing something wrong, because it's not working. I inserted the code right after "head" under "Edit HTML" for my template. I saved that then put my spoilers between "div class='spoiler-text'" and "/div" in the html settings of my post. But the words I wanted hidden still showed up without the "spoiler[+]" --The redacted solution works, but I'd love it if I could get the other option. Any advice would be much appreciated.
Jen, I looked at your blog and didn't see the script added in. I'm guessing you have a test blog you tried it out on. Send me a link to your test and I'll take a look.
I put it in and took it back out when it didn't work. I put it back in again. :)
Jen, Sending you an email to work out the details with you. It looks like there's a conflict from the original redact solution I showed you before. Otherwise, the source looks right.
A big thank you, James! This is just what I was looking for!
Sorry to come back and bother you after all this time. But lately, this is displaying differently. It's not a huge deal. But the font looks a little lighter in the spoiler text than the text in the rest of the post. And now, it seems to be set-in a little, like it's own little paragraph. I didn't change anything that I'm aware of --and I can live with it-- I'm just wondering if you have any thoughts.
You can easily find an example here: http://redhotbooks.blogspot.com/2011/06/review-abandoned.html (in the second to last paragraph.)
Thanks again for designing this. I use it all the time.
@Jen, the color should not look different unless you are customizing text around it. The spoiler inherits its color from the container.
On the in set, that is intended and part of the original code. The below style adds 5px left and right padding to the spoiler span. You may change that if you like.
span.spoiler-text {
display: none;
padding: 0px 5px;
}
I removed the padding (I think.) But I still see a big gap between the end of the spoiler and the next line of text.
And the font somehow looks different, maybe it's not the color... but I can look at it and see that it is not the same as the rest.
In your inline spoiler example, when you click on the spoiler, it appears fluidly in the middle of the other text, like it's all part of one paragraph. Mine still looks set aside.
@Jen, I don't know what to tell you on that. I'm looking at it live and examining the code with Chrome developer tools. The text is identical in code and there are no breaks in the text, not even line wraps, on my display.
The only thing I can even speculate at is some unknown browser setting that is applying to only the text around it. The CSS and HTML in the source are correct though.
That is so odd. This is how it looks to me: http://i1092.photobucket.com/albums/i405/JenMartin1/blog.jpg
But if it doesn't look that way to you, who knows? Thanks for your help.
Ha! Apparently this has something to do with IE, because when I pulled the same post up in Firefox, it displayed perfectly!
@Jen, yeah looking at your screenshot some setting appears to be bolding everything else. It doesn't really look like a zoom problem, though I must confess I rarely use IE or the customization features of any browser. :(
The spoiler certainly stands out at least?
Whatever the deal is with IE, it has to be some standard setting, because -1- I'd never know how to even begin to mess with it and -2- it displays in the same odd way on my home p.c. and at work. The bold/non-bold thing is less of an issue than the odd spacing thing is. But there doesn't seem to be anything that can be done about it.
Thanks again.
Thanks a lot for your tutorial! ^.^ It really helps!
Have just used the spoiler hide code for my book review blog. Very helpful, much appreciated.
This is what exactly I am looking for. Thank you. But I wish to change the word 'spoiler' to a different word. How to?? It will be more helpful to me.
Post a Comment