In Movable Type, extended entries are used to provide flexibility in the display of a post. The best example is hiding a portion of a very long post. This remainder of this post (the extended part!) explains how to configure MT templates to employ extended entries that expand and collapse the text on the index page itself instead of moving to the individual post page.

When I was developing my MT templates, I was not concerned at all about the extended entry part of the template. This was because I had already decided that I was never going to use it anyways. My logic was assuming that most people would not bother to click to read the rest of the post. I was also not satisfied with the way the extended link worked. In the standard template, it takes the user away from the index page and to the individual post. This is disruptive when the user is trying to catch up on all latest posts.

I changed my mind for two reasons. First, I often write long posts and understand that every post will not interest every reader. I would rather have a reader skim the first two paragraphs of several posts and end up spending more time here then have him get bogged down in a very long post and quit the site. Second, I have noticed that many sites have extended entries which expand and collapse instantly, without leaving the page. There are many sites that do this, but first place I noticed it was at Winds of Change.

Before I explain how to modify your template to do this, I have to give credit where credit is due. The javascript is from the amazingly useful Scriptygoddess, more specifically in this post. I'm just trying to provide a very clear installation explaination for it (plus one additional step which was not mentioned there).

Implementing expandable extended posts into your index template involves three simple steps:

Step 1: Adding the Javascript

<script language="javascript">
function showMore(varA1, varB1){
  var123 = ('varXYZ' + (varA1));
  varABC = ('varP' + (varA1));
  if( document.getElementById ) {
    if( document.getElementById(var123).style.display ) {
      if( varB1 != 0 ) {
        document.getElementById(var123).style.display = "block";
        document.getElementById(varABC).style.display = "none";
      } else {
        document.getElementById(var123).style.display = "none"; 
        document.getElementById(varABC).style.display = "block";
      }
    } else {
      location.href = varB1;
      return true;
    }
  } else {
    location.href = varB1;
    return true;
  }
}
</script>

Step 2: Modifying the Extended Display Section

<MTEntryIfExtended>
  <span class="extended">
  <a href="<$MTEntryPermalink$>#more">
  Continue reading "<$MTEntryTitle$>"
  </a></span><br />

</MTEntryIfExtended>

<!-- ENTRY EXTENDED BODY -->
<MTEntryIfExtended>
  <span id="varP<$MTEntryID$>">
    <p><a href="#<$MTEntryID pad="1"$>"
    onclick="showMore(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');
    return false;">Show me the rest</p></a><br />
  </span>
  <div id="varXYZ<$MTEntryID$>" style="display: none">
  <p><$MTEntryMore$></p>
    <p><a href="#<$MTEntryID pad="1"$>"
    onclick="showMore(<$MTEntryID$>,0);return true;">
    Ok, I've seen enough</p></a>
  </div>

</MTEntryIfExtended>

Step 3: Add an Anchor to the Start of Each Post

<a name="<$MTEntryID pad="1"$>"></a>

UPDATE: If you are using the BASE tag to set the default target to "_blank" (forcing all links to open in a new window), the collapse link anchor must also have the following:

target="_self"