Animated Content Spoiler with html or css

http://www.founted.com/2013/03/animated-content-spoiler-with-html-or.html

Animated Content Spoiler with html or css

css

Put below 

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

html

<input type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';"><br /> <div> <div> PUT CONTENT YOU WISH TO HIDE HERE<br /> </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

Posted in: blogger tips