There's an abundance of goodies out there for the blogger who wants to get a bit of show / hide action going on their blog. Expandable posts are useful if you write long posts and want to tease your readers with a little something but keeep your template looking stylish.

There are a number of strategies available to get this done.... by the end of this post I'll probably wish I was using one of them!

Blogger themselves offer a couple of different strategies for this. The expandable post summaries hack uses conditional tags, wraps the part of your post that you want to hide in a special span tag (which you can add to the post template so that it is always there waiting for you), and only shows it on the post page. The "read more" link is really a link to the post page. Quoting Blogger for the pros & cons:

• Advantages to this method: Customizable summaries, rather than titles only. Can be applied to some posts and not others (for instance, you might only want this for your longer posts).
• Disadvantages: Requires changes to the posts themselves, rather than to the template only. However, the "read more" link is in the template, so it will appear regardless of whether a post has been truncated or not. (Modifying this feature is left as an exercise for the reader.)

The alternative Blogger-endorsed method is the show/hide method, which hides the whole content of the post, and asks the reader to decide whether it is worth a look based solely on the title. As you know, it is tricky to write a post title that will suck in a reader, and so relying on the title alone to suck in your audience may not be the way to go...

Aditya at The Last Word offers an alternative method. It allows for a teaser-section of your post as a supplement to your title, & so stands a better chance of hooking your readers. It works inline too, popping open the post on your main page instead of sending your readers off to the post page. The main upgrade, though, is that the "expand this post" link won't appear on posts that are not abbreviated, and therefore do not require expansion. On the downside, once the post has been expanded, you're not currently able to collapse it again. Aditya offers a script for the head of your template, & asks you to wrap the part of your post that you're hiding in a tag that the script can see. This also requires a minor change to your body tag, & the wrapping of your blog post content in a div tag, so that the script knows where to make its magic happen.

Julie at No Fancy Name offers a hack that has a similar outcome, & being a wordsmith of the first order, lays out the goodies in a way that will make sense to you if you still think Java is an island in the ocean somewhere.... (I read that once....) What is nice (not to say suh-weet) about Julie's hack is that the "read more" button only appears on posts where there is more to read, and it is joined by a "back to the main page" button when it activates itself. This means that even if you're a main page all-post-reading browsing sort of a visitor, all is not lost when you find yourself on a post page. Cool.

So, my advice is to toss the default hacks, & decide whether you want "on-page pop-out" expansion, or "link to the post page & link back" buttons.

Let me know what works, & let me know if you're working this out a different way.

Update: Gaby from Blogger Categories has a cool how-to / demo combination post that lays out another way to do this. Where you see >> links in his post, you can pop out more content. You can also click again to collapse the post. There's a script & some CSS for your template head, and some "use it as often as you like" HTML that could go in Blogger's post template if you were so inclined. All good stuff. Thanks for sharing, Gaby!

Filed in: blogger blogtech webtech blogger-hacks