Show/Hide Post Details

Do u have a blog and want to let your users expand/collapse the text of your posts, especially the long posts? Just follow Blogger's help topic entitled
How can I make show/hide links for my posts?

Now want to add a "show/hide all posts" link? Here is the code I wrote and instructions which assume you did the above steps already.

Step 1. In your template where you put the javascript "function expandcollapse", you must add more code so it will look like this:

function expandcollapse (postid) {
 whichpost = document.getElementById(postid);

 if (whichpost.className=="postshown") {
  whichpost.className="posthidden";
 }
 else {
  whichpost.className="postshown";
 }
}
var postIDs = "";
var allHidden = true;

function expandcollapseAll() {
var postArray = postIDs.split(",");
for (var i=0;i< postArray.length;i++) {
if (document.getElementById(postArray[i])) {
    whichpost = document.getElementById(postArray[i]);
    if (allHidden) {
        whichpost.className="postshown";
    } else {
        whichpost.className="posthidden";
    }
}
}
allHidden = !(allHidden);
}


Step 2. Right after where you put

<a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
[+/-] show/hide this post</a>

add the following line:
<script language="javascript">
postIDs+="<$BlogItemNumber$>1,"</script>


Step 3. Somewhere after <div id="sidebar">
add the following line to create a link  
<a href="javascript:expandcollapseAll()">
[+/-] show/hide all posts</a>


That is all there is to it!