Expandable Entries, Blogger Style

In this post I will describe the method for creating expandable entries.

Only a portion of the post is visible, usually the first paragraph or two, so it becomes a teaser for the entire article. At the bottom is a link that redirects the reader to the post page where the entry is displayed in full. For this to work, post pages must be active. Go to Settings > Archiving to see if it is on.

Adding this feature to your blog is easy.

This is the text that isn't displayed when the index or archive page loads.

In the index and archive page, the class attribute "post-hide" is set to display:none. When the post page is loaded, it is set to display:inline. This is the neat trick behind Blogger's expandable posts.

To make this work, you need to:

• Add these class properties to the stylesheet.
  

  
  .post-hide {
  <MainOrArchivePage>
    display:none;
  </MainOrArchivePage>
  <ItemPage>
    display:inline;
  </ItemPage>
  }
  

• Add the following code for the redirection link to the post section of your template, preferrably after the <$BlogItemBody$> variable.
  

  
  <MainOrArchivePage>
     <a href="<$BlogItemPermalinkURL$>">
  View full entry</a>
  </MainOrArchivePage>
  

• Lastly, you need to add this code to the post itself. Insert the text you wish to hide between the tags.
  

  
  <div class="post-hide"></div>
  

  Since this is a <div> tag, a line break is automatically created making the text appear to be on a new paragraph.

That's it. Clicking the redirection link unconditionally takes the visitor to the post page. The only caveat is that the entries in your index and archive pages will now display the redirection link by default (even the posts prior to applying this method). The link will show up even if there is no <div class="post-hide"> in your post.

The workaround is to use expandable entries in the main page only. This way, older posts in the archive will still be displayed whole so there is no need to edit them. See tip below.

Tips:

• You can copy and paste the above <div> tag to the post template so you don't have to type it in every time you compose a new entry. The content of the post template is copied to your text editor (applies to new posts only). To go to your post template, click Settings and then Formatting.
  
  
  
  
• To create expandable entries in the Index page only, use the stylesheet code below:
  

  
  .post-hide {
  <MainPage>display:none;<MainPage>
  <ItemPage>display:inline;<ItemPage>
  <ArchivePage>display:inline;<ArchivePage>
  }
  

  
  Also change the redirection tag as follows:
  

  
  <MainPage>
     <a href="<$BlogItemPermalinkURL$>">
  View full entry</a>
  </MainPage>
  

• Displaying 5 posts in the Index page would look just right.
  
  
• To reduce the length of the archive page, it is possible to display just the post titles, making your archives look like a table of contents. Clicking on a title brings the reader to the post page of the article. This is the method I used in Cat-tales & Mewsings. If you want this trick, tell me so. I'd like to see the full potential of this template! ;-)

Get the template with expandable post codes (opens new window).