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:
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.
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.
That's very kind of you. Will come back to your tutorial someday when I am ready to understand them and make good use of them.
ReplyDeleteI have seen the older post where you told me the way it's done, however since i know i am not good in following computer instructions i procrastinated and still am. I am still thinking of the photos i will try to put as my first lessons.
ReplyDeleteHi Solitude! Thanks again for this post. will try it on my future blog posts! Thanks for dropping by my blog too. :)
ReplyDeleteHi One,
ReplyDeleteNo rush. When you think you have use for it you can come back anytime and feel free to ask questions too.
----------
Hi Andrea,
When you're done procrastinating, the posts are always here for your reference :)
----------
Hi Kingdom,
Much welcome. I'll drop by your blog from time to time. I'm always looking for garden blogs to read because in some ways I learn from each of the bloggers.
I see that you've already used the 2-in-1 trick in one of your post. You made a good application of the trick.
Thank you very much for giving the 'secret' for this 'magic post'. You are good with HTML!
ReplyDeleteThanks Autumn Belle! I hope these mini tutorials are helpful to anyone who wish to use it.
ReplyDelete