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. - An alternative to the show/hide method is to use post summaries. Each method has its own advantages and disadvantages.
- 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).
http://help.blogger.com/bin/answer.py?answer=42214
