How can I make show/hide links for my posts?

Note: This article assumes you are using a classic template (without the Layouts features).

This is a trick that's particularly useful on blogs with very long posts. What happens is that a reader will only see the titles of your posts at first, so they can skim through and see what they want to read. Then, when they want to read a post, they can click a link to see the full text. The text can then be hidden again when they're done reading. This all happens on one page, so there is no extra navigating to or loading of other pages. You can give it a try here:

This is a Long Post

Well, okay, it's not really all that long, since I don't have a whole lot to say here. But I ought to put at least a decent paragraph here so you can get an idea of how this will all work. Anybody know any good jokes? C'mon, somebody must. Do I have to do this all myself? I guess so. Not that it really matters, of course, since there's no point in carrying on too long. Go back and read the rest of the article! (You can click the link below to hide this entry again.)
[+/-] show/hide this post

There are three ingredients that go into this feature: CSS, Javascript, and of course, Blogger template tags. So let's go through it step by step.

CSS

This is the simplest part. We need a couple classes that either hide posts or show posts, so you can just paste these two lines into your style sheet:

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

Your style sheet is usually near the top of your template, between the <style> and </style> tags. If you have your style sheet in a separate file, you'll just add these lines to that file instead of to your template.

Javascript

Add the following code to your template, between the <head></head> tags:

<script type="text/Javascript"> 

function expandcollapse (postid) { 

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

This is the function that we'll use below to show or hide the post. We just give it the ID number of a particular post, and it changes that post from one CSS style to another.

Blogger Tags

Now that we've got our tools in place, we can actually apply them to our posts. In between the <Blogger></Blogger> tags in your template, you'll see the section where the posts are displayed. The code we'll use here looks like this:

<BlogItemTitle> <$BlogItemTitle$> </BlogItemTitle>
   <span class="posthidden" id="<$BlogItemNumber$>1">
      <$BlogItemBody$><br />
   </span>
   <a href="javascript:expandcollapse('<$BlogItemNumber$>1')">
   [+/-] show/hide this post</a>

You can, of course, modify this to suit your template. For instance, you may want to have other formatting tags in there, and probably other code for your byline, or comments. The "[+/-] show/hide this post" text can be changed as well.

The most important part of this code is the <span> wrapper around the <$BlogItemBody$> tag. You can see that this section starts out being hidden, and it uses <$BlogItemNumber$>1 to create a unique ID. (The extra "1" is to make sure it is unique, in case your template is already using the blog item number for something else, like a permalink.) The Javascript link uses the same ID number to make sure that we show or hide the correct post.

Once you've got everything in your template, just save the changes and republish. The new format will automatically be applied to all of your posts, without having to change anything else.

Notes:

  • As with any template modifications, you should be sure to save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you'll have it there as a replacement in case anything goes wrong.
  • Advantages to this method: Only the template needs to change, with no modification required for your posts.
  • Disadvantages: Only the title of each post is displayed, with no summary information. The feature is applied to all posts, rather than letting you selectively apply it (for instance, only on long posts).