Saturday, October 24, 2009

Expandable Blogger Posts

This tip can be used in your blog or web site to hide long posts or articles. Inserted of navigating to another page, using this tip you can wrap things like screen shots and source codes that reader doesn’t want to see at the page load.

First go to "Edit HTML" page.

Then find the <head> and </head> tags.

First paste this code between <head> and </head> tags in your HTML code.

<style type='text/css'>
 .commenthidden {display:none}
 .commentshown {display:inline}
<script type='text/Javascript'>
function togglecomments (postid) {
 var whichpost = document.getElementById(postid);
 if (whichpost.className=="commentshown") {
  whichpost.className="commenthidden"; }
 else { whichpost.className="commentshown"; 

Then put the things that you want to hide between following div tag.

<div class="commenthidden" id="yourDivId">
    your content goes here

Note: Here "yourDivId" should be unique one. That means if you are going to use this more than one time, you have to replace "yourDivId" using unique name.


  1. I can't believe that this worked! I've tried four or five other methods, but none of them worked (and it's getting harder to find code that'll work with Classic Template — and I just _refuse_ to switch to the new one), and I only ended up with a massive headache. But this one worked on the first try. Brilliant!

  2. @ Olive Green,
    I'm very happy to hear that from you. Thanks for your valuable comment !