Vanishing contents --- tutorial

My blogger friend Autumn Belle was also curious as to how I displayed and hid the tutorial in my Two in one post.

Here's how it's done and I assure you it's very easy. Click here to show or hide the code.

Procedure on how to show and hide contents trick:

1. Choose which content you wish to hide or display at will. You can choose any part of your post, even picture(s).

2. Edit your blog, choose "Edit HTML"

3. Look for the content that you selected in Step #1. For example: the sentence below is what you wish to show&hide:

I want to show and hide this sentence.

4. Enclose the sentence with the following commands : <div id="whatever" style="display: none;"> and </div>

Example:
<div id="whatever" style="display: none;">
I want to show and hide this sentence.
</div>

Take note of "whatever".
Congratulations, you are now halfway through.

5. Now create a link or a to "click" to show and hide the sentence above. You can just copy and paste any of the examples below:

Example of a link:
<a href="javascript:;" onclick='if (document.getElementById("whatever").style.display == "block") { document.getElementById("whatever").style.display = "none" }
else { document.getElementById("whatever").style.display = "block" }' >show or hide code</a>

Example of a button:
<input type="button" value="show or hide code" onclick='if (document.getElementById("whatever").style.display == "block") { document.getElementById("whatever").style.display = "none" }
else { document.getElementById("whatever").style.display = "block" }' />

6. Remember "whatever"? You can replace whatever with any word of your choice.

7. Below is an example of the finished code using a button.

<div id="whatever" style="display: none;">
I want to show and hide this sentence.
</div>
<input type="button" value="show or hide code" onclick='if (document.getElementById("whatever").style.display == "block") { document.getElementById("whatever").style.display = "none" }
else { document.getElementById("whatever").style.display = "block" }' />

and this is how it will appear on your post:

I want to show and hide this sentence.

8. You can place the link/button above or below the content you wish to show/hide, just put the code of the link/button above or below the code of the content you wish to show/hide.

I hope this tutorial was able to help you.