Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks » Animated Content Spoiler

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Animated Content Spoiler

Animated Content Spoiler

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,180 views

In today’s featured Blogger tip, we show you Bloggersentral’s Greenlava with this improved content spoiler that can also hide parts of your blog. It can be used in posts, pages, widgets, etc.

Some of its enhanced features are:

  • Animated actions by using CSS3 transitions.
  • Getting multiple spoilers in a page without assigning a unique ID.
  • Changing button text according to state of spoiler.
  • Made up of CSS and HTML, below are the codes.

CSS:

<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> 

HTML:

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

Note:

You can modify this by replacing ‘show’ and ‘hide’ text with your own. You can also change the speed of animation via line 5 of the CSS.

 

Liked It ? Please Share

Comments

One Response | Post A Comment | Subscribe To Comments RSS Feed

  1. Dear Allblogtools,
    Thanks for the above, What tips & tricks do you know to get the best colour result when coloring your hair at home?
    thanks :)
    Cheers

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here