Button Or Show-Hide Effect in Blogger

This code will add a button, clicking it will expand the content, showing the hidden part. See it in action, click the button now,

very simple show/hide effect code for you to copy and use. This effect is also known as a spoiler or a peek-a-boo. It uses a small inline Javascript. You can use this code anywhere, be it in the sidebar or in your blog post, as long as you can add the spoiler code to it.
 Example
Click Here :

Put Your Code Here

<div style="margin: 5px 20px 20px;">
    <div class="smallfont" style="margin-bottom: 2px;">
         Click Here :
        <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button">
    </div>
    <br />
    <div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset; background: #f5f5f5 none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(127, 69, 0); line-height: 1.5em;">
        <div style="display: none;">
            Put Your Code Here<br />
        </div>
    </div>
</div>

Example

Click Here :

Put Your Code Here

<div style="margin: 5px 20px 20px;">
    <div class="smallfont" style="margin-bottom: 2px;">
        Click Here :
        <input value="Show" style="margin: 0px; background: orange;color:white; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button">
    </div>
    <br />
    <div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;background: #C7F25F none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(12, 69, 0); line-height: 1.5em;">
        <div  style="display: none;">
            Put Your Code Here<br />
        </div>
    </div>
</div>

Example

Click Here :

Put Your Code Here

 <div style="margin: 5px 20px 20px;">
    <div class="smallfont" style="margin-bottom: 2px;">
        Click Here :
        <input value="Show" style="margin: 0px; background: black;color:white; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button">
    </div>
    <br />
    <div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;background: #FFDE4C none repeat scroll 0% 50%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(12, 69, 0); line-height: 1.5em;">
        <div  style="display: none;">
            Put Your Code Here<br />
        </div>
    </div>
</div>

Note:

• Replace “Click Here” text with your own.
• Replace “Put Your Code Here” text with your text or code or link or any thing.
• If you want to change the form style, you can easily,don!