Create a Spoiler

Here is  a very simple show/hide effect code for you to copy and use. This effect is also known as a spoiler or a peek-a-boo.  It uses a small inline Javascript. You can use this code anywhere, be it in the sidebar or in your blog post, as long as you can add the spoiler code to it.

[Update Mar 2013] See our new and improved  content spoiler.

This code will add a button, clicking it will expand the content, showing the hidden part. See it in action, click the button now,

Simply put the content you want hidden inside the division tags, replacing the phrase HIDDEN CONTENT HERE.

VISIBLE CONTENT HERE
<div id="spoiler" style="display:none"> 
HIDDEN CONTENT HERE 
</div> 
<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Show/hide</button>

Customization

• You can replace “Show/hide” text with your own, in line 5.
• If you want to have multiple spoilers on a single page, make sure you give each of them a unique ID.
• To use a regular link instead of a button, simply replace the word buttonwith a letter a.