Easy Ways to Make Button Hide Show on Blog. When I first saw the show spoiler hide in a forum, right then and there I wanted to try it. Visible image with hidden buttons visible only show. If we click on the button (show) the images or text in the box will appear.
Indeed learning blog will never end always new questions arise when we start a blog, including me who are still learning and I have not much to know about creating a blog to appear perfectly. The benefits of using Button Show Hide is to shorten the expansive blogs and articles you will be more attractive and added neat. If the article interesting and neat, to be sure the visitors will often come to your blog.
This time I will share tips and show how to make a hide button on the blog. I will try to give an example of its immediate and direct sightings show hide button in this post. Here is the example that will be hide show.
"Download Template Lightweight SEO. Hi friends of bloggers, this time we will give you a lightweight download templates and SEO. This template is certainly very simple design and lightweight for your blog. I'm sure you would like to try this template."
After using the script hide show it will look like this:
Okay we learn together how to make the show hide button detail on the post:
Open the page to write an article in an HTML instead of Compose. After the page opens copy and paste the html script to hide his show below.
<div id="spoiler">
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"> <input 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'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div> <div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: #a3e4ff none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;">
Write your article here
</div>
</div>
</div>
Please fill in the red words with your article or picture ..... it will be writings or images Using the Show Hide button
Note : You can replace the blue writing that can be adjusted to your blog