How to Show and Hide Text in Blog Post ~ Bloging Guide To Blogger

would like to share on how to make a Show/Hide text in your blog post. I'm sorry if I didn't explain detail enough because I want to keep my post short as I'm in a hurry. However, you can read the detail explanation on Blogger Help.

In this example, I assume you have sub topics that you want to make it hidden until reader clicks on the headline. Without the show/hide trick, it would look like this...

Title One

This is the example text for title one.

Title Two

This is the example text for title two.

Title Three

This is the example text for title three.

Here's my step to do this... Firstly, edit your template and add the following code in the CSS area.
.posthidden {display:none}

.postshown {display:inline}

Then add the following javascript code on your blog template between the tag.

<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid); 
if (whichpost.className=="postshown") {
whichpost.className="posthidden";
} 
else {
whichpost.className="postshown"; 
} 
} 
</script>

Now save your template and all you have to do in each post you want to have the expandable sub topic is to create unique id for each sub topics where the code will look like this:

<a href="javascript:expandcollapse('subtopic0001')">
<h4>Title One</h4></a>
<span class="posthidden" id="subtopic0001">
This is the example text for title one.</span>
<a href="javascript:expandcollapse('subtopic0002')">
<h4>Title Two</h4></a>
This is the example text for title two.</span>
<a href="javascript:expandcollapse('subtopic0003')">
<h4>Title Three</h4></a>
<span class="posthidden" id="subtopic0003">
This is the example text for title three.</span>

And, here's the result...

Title One
This is the example text for title one.

Title Two