Blogger

How to Show Hide Data in Blogger or Website using CSS and spoiler

If you are running a blog on blogger or website and you want to show Hide data in blogger using a toggle button like Show/Hide.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. In this spoiler we use a button. 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. This Spoiler Allows for multiple spoilers in one page without having to assign unique IDs to them.

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

Related Articles

Leave a Reply

Close
Close

Adblock Detected

Please consider supporting us by disabling your ad blocker