How to show and hide text in blogger post

Posted On / 1 comment

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}
css area for blogger


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!!!



Receive News From The Blog In Your E-mail

Sign up and receive directly in your email. Its free!! Enter your email address and then confirm to begin receiving exclusive news from Blog!


1 comment:

  1. IT WORKS!! Thanks so much! Check it out at http://www.welike2cook.com/2013/11/cornmeal-hasty-pudding.html.

    ReplyDelete

Please read first before commenting:

1.) No spamming please

2.) Do not flood the comment box with links.

3.) To get free updates, kindly subscribe.

4.) Have fun visiting my blog.

x
Subscribe
emailSubscribe to our mailing list to get the updates to your email inbox...
Delivered by FeedBurner | powered by blogtipsntricks