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;">&gt;&gt;</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. ——-

More in the discussion (powered by webmentions)

  • (no mentions, yet.)