Now you can hide the content or data in your blog or on your blog posts using the clickable button Show / Hide Spoiler simple uses Code.You can use CSS or code Spoiler to hide text in blogger. To hide part of the content of your blog, you can use the code spoiler mentioned below. You can use them in posts, pages, widgets, or wherever you want to hide content. In this case you can change the button text changes according to circumstances spoiler - "Show" in the state plot "Hide" in the event of the country.
With the help of animated expand and collapse action, using CSS Transitions. But the animation will not work in Internet Explorer though but it works well in other browser.The great thing is that you can use some spoilers in one page without having to assign a unique ID to them.
With the help of animated expand and collapse action, using CSS Transitions. But the animation will not work in Internet Explorer though but it works well in other browser.The great thing is that you can use some spoilers in one page without having to assign a unique ID 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.
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:
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!
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">.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!
Your comment are Welcome