Creating a Simple Show Hide button in Posts by Adhy Suryadi


One of the things that we can make in the post that show and hide the key. We can hide text or image with this, then visitors can view the image or text that we hide by clicking the button. Many types show hide this div, and here I will share how to make one of which shows a simple div hide in the post as you can see in the picture gif below.

Bagi yang mau mencobanya silahkan gunakan kode HTML di bawah ini, silahkan gunakan pada post editor HTML.
<div id="Button" style="margin:0 auto;text-align:center">
<input type="button" onclick="document.getElementById('Content').style.display='block';Button.style.display='none';" value="Get The Code Here" />
</div>
<div id="Content" style="display:none;width:300px;padding:10px;margin:0 auto;border:1px solid #aaa;text-align:center;box-shadow: 0px 1px 3px 0px rgba(179,179,179,1);background:#fff">
<p>
PLEASE SAVE THE TEXT OR IMAGES HERE
</p>
<input type="button" onclick="document.getElementById('Content').style.display='none';Button.style.display='block';" value="&#10006;" />
</div>
And note the width Content on this code width: 300px can replace the numbers in your favor like this
Share this on Google+ Tumblr

Leave a comment

To insert a link, use tag [url=http://your_link]your-link[/url]
To insert the code , use the tag <i rel="code">your-code</i>
The long code can use the tag <i rel="pre">your-long-code</i>
To insert an image , use the code [img]URL Image[/img]
To insert a title , use tag <b rel="h4">Your Title here...</b>
To creat Bold text <strong>Your text here...</strong>
To create Italic text used tag <em>Your text here...</em>

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3
Cancel