December 14, 2002
Javascript for collapsing entries in MT

I've added this neat feature to my blog. The default for MovableType is to open the individual archive page when you click the "MORE" link to display the extended entry. With this script, you click a link and the extended entry is displayed below the main entry. You can see this feature at work in the last post.

To do this, add this script to the head:

<script language="javascript">
function toggle_extended(id_no, default_href){
extended_entry = ('extension_' + (id_no));
extension_link = ('more_link' + (id_no));
if( document.getElementById ) {
if( document.getElementById(extended_entry).style.display ) {
if( default_href != 0 ) {
document.getElementById(extended_entry).style.display = "block";
document.getElementById(extension_link).style.display = "none";
} else { document.getElementById(extended_entry).style.display = "none";
document.getElementById(extension_link).style.display = "block"; }
} else { location.href = default_href;
return true; }
} else { location.href = default_href;
return true; }
}
</script>

Then use this code for the extended entry in your template for the main index:

<MTEntryIfExtended>

<span id="more_link<$MTEntryID$>" class="extended">

<a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="toggle_extended(<$MTEntryID$>,'<$MTEntryLink$>#<$MTEntryID pad="1"$>');return false;">Read more ... &raquo</a><br/>

</span>

<div id="extension_<$MTEntryID$>" style="display: none">

<$MTEntryMore$>

<a href="#<$MTEntryID pad="1"$>" onclick="toggle_extended(<$MTEntryID$>,0);return true;">&laquo; ... Collapse entry</a>

</div>

</MTEntryIfExtended>

It works pretty well.

Posted by Gordon at December 14, 2002 04:32 PM | E-mail Author | Back to main page