How To Add Toggle Button in Blogger Blogs

Few days back when I was working with my other blog "Spice Up Your Brain", I was tempted to develop a code to toggle the visibility of the answers of the puzzles. So I studied the codes well so as to generate a simple code  to toggle the visibility of a content. At last I was successful in that and here I am sharing with you that code which can be used anywhere in your blogger blog, even in your blog post. The major advantage of this code over the others is that this can be used as many times as you wish in a single page without any distraction. You can see the live demo below!

Demo:

Hidden Content!

Add Toggle Button To Blogger Blog

1) Place the below code anywhere in your blog, where you wish to place the  toggle button.

<button class="tybbutton" onclick="if(document.getElementById('tybtoggle') .style.display=='none') {document.getElementById('tybtoggle') .style.display=''}else{document.getElementById('tybtoggle') .style.display='none'}" title="Click To Show/Hide Content" type="button">Show/Hide Content!</button>
<div id="tybtoggle" style="display: none;" class="tybtogglecontent">
Hidden Content!</div>

2) Copy and Paste the following code Directly Above ]]></b:skin>

/*Toggle Button Css*/

.tybtoggle
{
   font-family:Georgia,serif;
   font-weight:bold;
   background-color:#00CC33;
   border-color:#000000;
}


.tybtogglecontent
{ font-weight:bold;
  color:#000000;
  letter-spacing:1pt;
  word-spacing:2pt;
  font-size:12px;
  text-align:left;
  font-family:comic sans, comic sans ms, cursive, verdana, arial, sans-serif;
  line-height:1;
}

/*End Toggle Button Css @ http://www.tweakyourblog.com */

Customization:

• Replace "Show/Hide Content!" text with any text that you wish to be displayed on the button.
• Replace "Hidden Content!" with the hidden content.
• "tybtoggle" is the id of the Toggler, give each Toggler a unique id.
• "#00CC33" is the colour code of the button, replace it with code of any colour which you like.
• "#000000" is the colour code of the hidden content, replace it with code of any colour which you like.

That's it you now have a cool toggle button on your blog.

Drop your comments and questions below.