Content Spoiler With Simple Animation

Here is a light spoiler code that can be used to hide parts of your blog content. You can use it in posts, pages, widgets, or wherever you see fit.  This spoiler adds a few improvements to our previous spoiler, such as:

• Button text changes according to the state of the spoiler - “Show” in hide state and “Hide” in show state.
• Animated expand and collapse actions, achieved using CSS3 Transitions. The animation won’t work in Internet Explorer though.
• Allows for multiple spoilers in one page without having to assign unique IDs to them.

See it in action, test the demo below:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This simple content spoiler a.ka. show/hide a.k.a. peek-a-boo code only uses small CSS, HTML and inline Javascript. The show and hide animations are achieved using CSS3 Transition. It hides text, images etc. and should work on most browsers with the exception of Internet Explorer.

This spoiler is made up of two parts -CSS and HTML.

I) CSS

If you plan to use this spoiler regularly then I suggest you put this CSS rules in your template just before the </head> tag. If it is a one off thing then just place it in your post together with the HTML part of the spoiler.

<style type="text/css">
/* animated spoiler CSS by Bloggersentral.com */
.spoilerbutton {display:block;margin:5px 0;}
.spoiler {overflow:hidden;background: #f5f5f5;}
.spoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.spoilerbutton[value="Show"] + .spoiler > div {margin-top:-100%;}
.spoilerbutton[value="Hide"] + .spoiler {padding:5px;} 
</style> 

II) HTML

This part goes into the place you want the spoiler to appear -into a widget if you want to it in the sidebar or into your post HTML if you want to hide a part of a post:

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
PUT CONTENT YOU WISH TO HIDE HERE
</div></div>

Simply put the content you wish to hide inside the div tag, as indicated above.

III) Customization

The spoiler above is in its most basic form.

• You can replace “Show” and “Hide” text with your own. Simply replace the word in both HTML (line 1) and CSS (line 6 and/or 7).
• For multiple spoilers, all you need to do is duplicate the HTML part. Add as many as you want, they will work independently of each other.
• You can change animation speed by changing the duration (in seconds) in CSS line 5.

Enjoy!