Spoilers are snippets of information which you may wish to hide from viewers. For example you are narrating a long tale about a murder and some viewers may wish to cut to the chase and find out who the real murderer is, while others would like to read the whole without having their enjoyment cut short suddenly by the revelation.
This is where you provide hidden text which is revealed with a click. To do this you need to make the following changes :
ADD JAVASCRIPT CODE
Copy and paste this Javascript code between </head> and ]]></b:skin> tags in your template on the Edit Html subtab of Template tab :
<script type="text/Javascript">
function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else { whichpost.className="commentshown"; }
} </script>
Save Template.
ADD CSS CODE
Then add the CSS code below :
.commenthidden {display:none;}
.commentshown {display:inline;}
just above the ]]></b:skin> tag in the template and Save Template.
ADD CODE TO POST TEMPLATE
Add the following code to the post template in the Settings----->Formatting tab. Then the code will be available to you whenever you are creating a new post :
<a aiotitle="click to expand" href="javascript:togglecomments('NAMEITHERE')">
expand</a>
<div class="commenthidden" id="NAMEITHERE">
PUT HIDDEN TEXT HERE
</div>
Give it an unique name where it says NAMEITHERE and change "expand" to what ever you like. Type the hidden text inside the div (thats before the </div>). Save Settings.
For example :
Nam nunc. Donec blandit porta lacus. To see full text click here --->Nam dui tortor,
mattis vitae, commodo ac, nonummy ac, urna. Nam ut risus eu justo consectetuer convallis. Aenean fringilla. Fusce rhoncus fermentum est. Aliquam et pede non augue vulputate sagittis. Praesent consequat ante at nunc.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque lobortis, turpis ut facilisis convallis, nulla sem feugiat tellus, in tempus mauris urna non lacus. Duis pellentesque. Cras tempor iaculis lacus. In pharetra elementum purus.Thanks to Categories blog for the code.
35 comments:
I didn’t realize that you could do this. Great tip!
Your blog has been so helpful to me, but I am stumped with trying to add the code to make a "spoiler." When I apply the code where it's recommended I get this error:
"We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "type".
The tags on my template are in reverse order of what you have here Should that matter?
Thank you for your help!
I tried to save the template after adding the code, and I get the following error:
Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Open quote is expected for attribute "{1}" associated with an element type "type".
Sorry if this double posted! Any suggestions?
Virginia Travis,
You can copy the code now. I have corrected it.
Thank you so much, Vin! It works like a charm. Awesome work.
Thanks for that code... I'll make use of it asap :-)
One question though: Could it be adapted so that the hidden text can appear when the mouse hovers over the designated area instead of just clicking on it?
Thanks once again :-)
Loup dargent,
The hover function is not used here. It is a link and you cannot open a link by hovering over it. :-)
Hi Vin,
can i define an other color (via css...) for these especial links, what are not hyperlinks.
Best Regards
Bernhard
Dr. Bernhard Schülke,
Define a special class in css like this :
especial a { color:#000; }
especial a:hover { color:#fff; }
Instead of '000' and 'fff' put your own colors and then in your post html use :
<ul class="especial"><li><a aiotitle="click to expand" href="javascript:togglecomments('NAMEITHERE')">
expand</a>
</li></ul>
thanks for redirecting me to this section. but i'm still unsure how to hide a photo and not just text
BEL,
Follow the three steps above to install the hack.
Then Create a post. In Edit Html tab of Post Editor you will see "PUT HIDDEN TEXT HERE" if you have followed all three steps correctly.
Upload your image to the post. After clicking DONE button you will see the code for the picture at the top of the Post Editor window. Highlight the code and use Ctrl+X to cut the code and then use Ctrl+V to paste it instead of the words "PUT HIDDEN TEXT HERE".
Publish Post.
woah awesome work. by the way, have to consider of changing skin? LOL
Hi Vin, my hidden text shows up when I preview the message. Am I doing something wrong, why is it not hiding?
Sarah,
What is the blog address? Enable Javascript in browser settings.
hello anyone here to help me? i hope so,
i'm frustrated in trying to set up spoiler tab in my blog it is not working - HELP!
i did wot the above 3 steps said - and i wrote a whole walkthrough with numerous spoiler codes inserted with unique id(nameithere) for each spoiler -
i am still not getting it - it shows perfectly but i cant click on it - somebody help me!!!
in the Post template of the settings tab i just need to copy and paste the 3rd step right - just like that?
why isnt this working??
HELP me before i give up!
u can check out at my blog - see wots the porblem :
www.amnesya-answers.blogspot.com
HELP!:(
Hamzay,
When creating your blog post you are putting your hidden text in the wrong place.
Please go through the third step carefully. Edit your posts to put the hidden text in the correct place.
Hamzay,
The code in your Post Template is also wrong. Check it again.
Hi! Thank you for this great tip. I do have one question though: every time I try, the line automatically breaks between "expand" ("click her for spoiler" in my post)and hidden text. What could be the problem? Thank you for your help!
my blog: http://charisinwonderland.blogspot.com/
Charis,
Open the post for editing and use backspace key on keyboard to remove any line breaks or spaces between 'expand' and the rest. Then publish.
As you can see in my above post there is no line break.
vin,
i do not have a ]]>\/b:skin/ code to my blog. so where do i paste the code for CSS?
i know where to paste the code for javascript as it is quite simple.
can please help me?
blog: blovvfly.blogspot.com
thanks vin in advance
Blowfly,
The CSS in Classic Template is between these two tags :
<style type="text/css">
CSS
</style>
Great post! Solved a problem I had since I created my first blog. Thanks a lot
Hi, i have a problem here. I tried placing the codes but my hidden text still appears.
my add is: happy-gaming.blogspot.com
Thanks.
~What is life?~,
You forgot to add the dot before this code :
commenthidden {display:none;}
It should be :
.commenthidden {display:none;}
Thanks alot vin! I managed to solve the prob. XD. Btw, ur blog is really very useful.
Thank Vin. I went through your codes again and found that I found that I have missed out the filename.
Your tips are great!!
Thanks Vin!
A great idea and can't wait to use it.
Also, as per my email earlier today, If you do happen to find away around this (as per my question), I'll be sure to look back here. I've got you on feed.
Once again, Thanks for all your assistance!
;)
~ZZ
Thanks u r the best
Thanks very much for this!
I do have a quick question though - when I put this into my blog's HTML set up, I noticed that if you put more than one "spoiler" (collapsible text) on the blog, clicking on the "Shown Text" will only show the first spoiler.
Hard to explain, so I set up a text blog to show you - http://dfgdgdggggf.blogspot.com/
I put three Shown/Hidden text combinations, but when you click the second or third "Shown" text areas, their corresponding "Hidden" texts don't show, only the first one does.
Just wanted to know if I could fix this...my blog tends to consist of about 7-10 different categories, and I'd like there to be Hidden/Shown text for each
Thanks again!
Chuck Staton,
In your code if you have multiple instances in one post change 'NAMEITHERE' to 'NAMEITHERE2' and so on.
I have a problem with this and that is that it is working for MSIE (7), but not for Firefox (3).
http://willtrikertg.blogspot.com/
Also in reaction to Chucks post and Vins answer .... as far as I can tell it's not in a single post, but the entire page and perhaps the entire blog that you need to have different IDs (I have to little posts atm on my blog to see if my observation is valid for when posts drop off to page 2 and beyond).
On my Blog I have 3 posts with all of them spoiler code inside with all the same ids, but no matter which one you click on it will only show the last one posted does.
Any chance you can take a look at this Vin ... the ids I don't mind to much, but I really would like it to work in FF.
Could you help me figure out where to input the commands?
I do not have "]]>[/b:skin]" and due to some scripts, my template has 2 "head"
Any help would be much appreciated..
Whoops, sorry for the inconvenience, but I somehow trial-and-error and finally got it to work. Thanks anyway.
Cheers! =)
I just could figure it out how to.. would anyone kindly help me? here's my email: my.kitty.lust@hotmail.com
Hello Kitty,
At which step did you get a problem?
CLICK HERE TO LEAVE A COMMENT.
Skip to top of post.