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.
