Show and hide extended MT text
Aarondot’s front page doesn’t display extended text in a blog entry by default, but makes it appear on clicking by using the DOM in modern browsers. Well, this site does it too, and does it better to boot. :-)
There are two stages to this: first, you need the toggleExtended Javascript function included in your page somehow. My site uses a sort of SSI to have a consistent header on each page, so I put it in there; you could possibly add it to your MT template files to ensure that it was everywhere, or put it in an external JS file and add a <script src="myexternaljsfile.js" type="text/javascript"></script> line to your templates or header to include it. Anyway, the function looks like this:
function toggleExtended(mtentryid,lnk) {
if (document.getElementById &&
document.getElementById('extended-'+mtentryid) &&
lnk.innerHTML) {
ext = document.getElementById('extended-'+mtentryid);
if (ext.style.display == 'none') {
ext.style.display = 'block';
lnk.innerHTML = '<<‘;
} else {
ext.style.display = ‘none’;
lnk.innerHTML = ‘>>‘;
}
} else {
location.href = lnk.href;
}
}
After that, edit your MT templates and change the MTEntryIfExtended portion to look like this:
<MTEntryIfExtended>
<span class="extended"><a href="<$MTEntryLink$>#<$MTEntryID pad="1"$>" onclick="toggleExtended('<$MTEntryID$>',this);return false;">>></a></span><br />
<div style=”display: none” id=”extended-<$MTEntryID$>”>
<$MTEntryMore$>
</div>
</MTEntryIfExtended>
Note that this will make your “expand” link be >> and your “collapse” link be << — to change this, alter the highlighted parts in both bits of code.
This will show/hide the text in DOM-supporting browsers, and will take users to the individual page for that comment in non-DOM-supporting or non-Javascript-supporting browsers.
—–