How to show and hide text in blogger post

Hello and welcome back to another blogger tutorial on FH2M. Today I will share a cool trick that you probably want to know, its about how to show and hide text in blogger post. I have seen this kind of trick on some websites "about" page, in where they create an FAQ on their site, and when you click on the questions a hidden answer will appear. This is also used for creating sub topics on their posts or static pages.

Here are some of the Demo

Title One

Subscribe to my site.

Title Two

For more tutorials.

Title Three

And blogger tricks.

How to install show and hide text in blogger posts

1. Go to your blogger.com account.

2. Click on template > Customize > Advanced then add this code to the CSS area. After that click "Apply to Blog".

.posthidden {display:none}
.postshown {display:inline}

If you didn't know how to find it, it is just between the <b:skin><![CDATA[ and the ]]></b:skin> in your blogger template.

3. Then find the </head> tag and put the codes below just above it.

<script type="text/Javascript">

function expandcollapse (postid) {

whichpost = document.getElementById(postid);

if (whichpost.className=="postshown") {
whichpost.className="posthidden";
}
else {
whichpost.className="postshown";
}
}
</script>

4. After pasting those codes, save your template. Now go to your blogger post or static page, click "HTML" and use the following codes. The result is the Demo above.

<a href="javascript:expandcollapse('subtopic0001')">
<h4>Title One</h4></a>
<span class="posthidden" id="subtopic0001">
Subscribe to my site.</span>

<a href="javascript:expandcollapse('subtopic0002')">
<h4>Title Two</h4></a>
<span class="posthidden" id="subtopic0002">
For more tutorials.</span>

<a href="javascript:expandcollapse('subtopic0003')">
<h4>Title Three</h4></a>
<span class="posthidden" id="subtopic0003">
And blogger tricks.</span>

Note: 

• Remember if you are going to use it more than 1 times, you should always customize its unique ID just like shown in the sample colored in red. 
• Replace Subscribe to my site. with your own sentence you want to be hidden.

Cheers!

and 

Happy Holidays!!!

Facebook Blogger Plugin: Bloggerized by Bloggerpreneur Enhanced by fromhobby2money.blogspot.com