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, 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.
Create Spoilers in Blog Posts with Javascripts
