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.

animated spoiler code without jQuery

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!

13 comments to "Content Spoiler With Simple Animation"

Greenlava March 8, 2013 at 8:24 PM    

@Martin
Thare are mistakes in your CSS code. In line 5 and 6, it should be ".spoiler > div" instead of ".spoiler &gt; div"

Martin,  March 9, 2013 at 1:11 AM    

Hi GL; many thanks for that.

I copied your source code into NotePad++ and from there, I copied it, in good faith into the blog posts, not realising that NotePad++ would render the pointy right arrow into HTML.

Well spotted and thank you! Except... having now ensured that the pointy arrow is a pointy arrow (sorry about this) I've republished the post and it still doesn't seem to be working...

I'm referring to this one:

http://thisisk2.blogspot.com/2013/03/testing-spoiler.html

(I've removed the spoiler CSS from the HEAD so that cannot interfere). Please can you tell me where I've messed up this time?


Thanks again GL....


Martin

Greenlava March 9, 2013 at 10:48 PM    

@Martin
There's a <br/> tag between spoilerbutton and spoiler. You need to remove that.

Martin,  March 10, 2013 at 12:57 AM    

Hi GL

Well I never put that breakspace in!! %*/$ Blogger must have done it! Wherever I am, Gremlins abound...

Thank you so much for your patience and help - all now works perfectly.


Best


Martin

Rujacksalad March 10, 2013 at 8:10 AM    

I like this post, because usually I meet for making animation is using Adobe Flash or another Animator Software, but in this I meet for making animation by using CSS, Very great post.

PeterBrinck March 16, 2013 at 6:57 PM    

Hi!
How can i change the button to an image?
I have made two images, one with "Show" and one with "Hide".

The way i have done it, does not work, now it only shows "Show"-button, even if it is already shown.

Greenlava March 17, 2013 at 4:12 PM    

@PeterBrinck
I don't think you can change it to an image.
This trick works by alternating the value of the button. That won't happen if you use an image.
Can't you just use CSS to style the button instead of using an image?

Raggedyjess April 7, 2013 at 4:02 AM    

Thanks so much, That will tidy up my posts!

Check me out at http://bit.ly/XUT18r

kevin,  April 19, 2013 at 1:35 PM    

i tried to hide a lot of image inside spoiler , and it does not seems to work . is there a limit to how much you can hide ?

Greenlava April 19, 2013 at 8:02 PM    

@kevin
You mean it does not collapse fully?
Try increasing the top margin in line 6. Now the value is -100%, try -200% and so on until it's hidden completely.

72616E676761313031 August 1, 2013 at 11:53 AM    

Thank you Sir! This is great, just the way i need it :)

Malaysia Tercinta December 13, 2013 at 11:40 AM    

I like the way you push down animation to reveal the spoiler.

Anomynous April 2, 2014 at 6:47 AM    

it works perfectly for me

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.