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. ——-

I'm currently available for hire, to help you plan, architect, and build new systems, and for technical writing and articles. You can take a look at some projects I've worked on and some of my writing. If you'd like to talk about your upcoming project, do get in touch.

More in the discussion (powered by webmentions)

  • (no mentions, yet.)