How to Expand and Collapse Texts or Post In Blogger

Last Revised: Saturday, January 19, 2013


This post will be showing you on how to make your texts go "Now you see me now you dont" in Blogger posts.
As you can see I am always going nuts thinking and coming up with new ideas which will make my posts engaging.

So one day I was thinking to myself what if I can write something fun for my readers. something that requires participation.  Not only am I able share my views clearly, my readers also felt engaged..
If you are interested in how I execute these show/hide post html code do take a look at my Black Hat or White Hat? Star wars Post.

First let me start the session by showing you an example of how the expand and collapse will look like.. and what you can embed inside them..

Click to Expand and Collapse

Now you see me now you dont

Einstein Peekaboo

Yup besides the texts you can "hide" videos and images using the code..

Lets Start with the Template tweaking part.. now for this to work you will have to edit your blogger template.(Always remember to back up your template before doing any tweaking)

Head over to your template and click on Edit HTML..
Search for these codes

.commenthidden {display:none}
.commentshown {display:inline}

Paste the following code underneath it.

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

After doing that, search for the closing head tag


And paste the following script above the closing head tag

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

You are done with the template.. Save your template.

Now each time you want to make your post expand or collapse under a certain subtopic, you just have to copy and paste these code in the HTML mode while you are composing your post.

< href="javascript:expandcollapse('subtopicID')">
<h4>Click to Expand and Collapse</h4></a>
<span class="posthidden" id="subtopicID">
Now you see me now you dont</span>

You are suppose to change the highlighted code into your own words.. I am using the text in my example 1 refer to it if you are not sure of what to change.
As for the subtopicID, if you like you can use a string of numbers
Take note that both subtopicID must be the same in order to work.

Share your link in the comments if you are using it for your post.  I would love to see your creativeness!!
Durian Opened by Simon Ooh

Currently viewed

Google+ Followers