Blogger show/hide post hack with anchors

UPDATE 25 May - Seems the first method below only works in IE and not in Mozilla/Firefox/Opera but the second method works on multiple browser platforms. A tip for using the second method, instead of inserting additional name tags, you can make use of exsiting ones that are inserted automatically by blogger. Whenever you create a new post, look in the address bar and copy the multi-digit value after the postID. Then use this as the anchor ID instead. This will automatically redirect to the header of the post instead of the span class or first paragraph of text!!

Those following this blog would have seen that I tend to use the show/hide posts option to condense the amount of information shown. Although it has worked pretty well, I was always irked by the fact that if my posts were really long, clicking on the "Show/hide full post" option on my blog would tend to roll up the current post and show the posts at the bottom leaving the viewer behind instead of returning them back to the initial post in reduced form.

Poring through the code and referring to W3C HTML specs, I managed to find a simple way to redirect the reader back to the top alogside the hidden post with the use of anchors.

The original technique used on this site is the one described on the Blogger help pages here. The only difference is now I've made use of the span id as an anchor for redirection. Only one line is added to the Javascript function to make this hack work. The original function is written like so

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

The focus is in the "if" section of the function which evaluates such that when the post is currently being shown (i.e. is equal to "postshown") then the function will hide the post by setting the className to "posthidden". Here I add a line to make redirect the browser to the span id which is my anchor. The edited code is as follows

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

What this basically does is to take the postid (which will become our span id when we write the post) and redirect using the location.hash function.

This change would only work if the "Show/hide full post" link is located near the top of the post. If the option is halfway through the post, there is still another way to redirect readers back to the top of the post. In each post with the show/hide option, add an additional anchor under a different name from the usual span class method so as not to have conflicting section names. For example, I could add an anchor to top of this post with the following code

<a name="postanchor"></a>

Then edit the javascript function in the template so as to be able to receive two parameters like so with the first parameter being the span id to indicate which portion of text to hide and the second parameter to indicate the anchor

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

Then just change the blogger tags of posts to indicate the span areas and anchor

<a href="javascript:expandcollapse('<postid>','<anchorid>')">
Show/hide full post</a>

Here's an example of how a posts' structure would be like if using the second method mentioned above (using HTML view editing)

<a name="thispostanchor"></a>
.....
First paragraph of post or abstract
.....
<span class="posthidden" id="thispostid">
.....
Rest of the post
.....
<a href="javascript:expandcollapse('thispostid','thispostanchor')">
Show/hide full post</a>

..... Show/hide full post