Learn How To Become a blogger ,Free Templates,Blogger Widgets, Blogger Gadgets,Blogger Tricks And Tips ,Download browsers,software,Net

Monday, September 17, 2012

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!

0 comments:

Post a Comment

Please do not spam Spam comments will be deleted immediately upon our review.

Regards,
JeHad Hussein

Note: Only a member of this blog may post a comment.

Subscribe via email for free

Activate your subscription by clicking on the link in an email from Feedburner. We respect your privacy.

Most Popular

 

random topics

Followers

Are you looking for?

Become a Fan On Facebook!

Follow @Bloggertofree