MainDoctor WhoMusicSoftware
Main Page

Alden Bates' Weblog

Feigning normality since 1973

Collapsible archive listing

Filed in: Movable Type.

The list of months in the right-hand sidebar on my index page there was starting to get a bit long, and I noticed that Jamas and Paul had neat little collapsible lists on their blogs, so I decided to have a go at doing the same thing in Movable Type. It was easier than I expected, because I was able to adapt the javascript I use on the NZDWFC forums page which does something extremely similar.

The first step was to add the year headers using a slightly modified version of the ArchiveDateHeader plugin, the second was to add in the javascript (which consists of some initial javascript to show and hide the appropriate parts of the list, plus a function which is executed if you click on a plus or minus). The part which took the longest was tweaking the stylesheet to make it look goodnon-crap. :)

The code I'm now using to generate the list is as follows:

<ul> <MTArchiveList archive_type="Monthly"> <MTArchiveDateHeader> <li class="archivelistheader"><span class="navicons"><span id="show<MTArchiveDate format="%Y">" style="display: none"><a href="#" onclick="return visible('<MTArchiveDate format="%Y">',1);"><img src="g/plus.gif" width="9" height="9" alt="" /></a></span><span id="hide<MTArchiveDate format="%Y">" style="display: none"><a href="#" onclick="return visible('<MTArchiveDate format="%Y">',0);"><img src="g/minus.gif" width="9" height="9" alt="" /></a></span></span><MTArchiveDate format="%Y"><ul class="archivelist" id="year<MTArchiveDate format="%Y">"> </MTArchiveDateHeader> <li><a href="<$MTArchiveLink$>" title="<$MTArchiveTitle$>"><MTArchiveDate format="%B"></a> (<$MTArchiveCount$>)</li> </MTArchiveList> </ul></li> </ul> <script type="text/javascript" src="/archivelist.js"></script>

I modified ArchiveDateHeader to insert an extra </ul></li> in there as well, to make the code sane. There might be a way to do that without modifying the plugin, but I was too lazy to check. ;)

The archivelist.js file looks like this:

// Date archive widget for(ii=2007; ii>2003; ii--) { if(ii==2007) { var listdiv = document.getElementById('year'+ii); var plusdiv = document.getElementById('show'+ii); var minusdiv = document.getElementById('hide'+ii); listdiv.style.display = 'block'; minusdiv.style.display = 'inline'; } else { var listdiv = document.getElementById('year'+ii); var plusdiv = document.getElementById('show'+ii); var minusdiv = document.getElementById('hide'+ii); listdiv.style.display = 'none'; plusdiv.style.display = 'inline'; } } function visible(year,on) { if (! document.getElementById) { return; } var listdiv = document.getElementById('year'+year); var plusdiv = document.getElementById('show'+year); var minusdiv = document.getElementById('hide'+year); if(on) { listdiv.style.display = 'block'; minusdiv.style.display = 'inline'; plusdiv.style.display = 'none'; } else { listdiv.style.display = minusdiv.style.display = 'none'; plusdiv.style.display = 'inline'; } return false; }

Assuming anyone wants to steal this code, go right ahead (though a link and credit would be nice :)

Posted April 29, 2007 12:17 AM

Comments

Blogspot does have that neat feature built in, but if I could only work out how to do folds in the damn thing. (The supposed help page doesn't...)

Posted by: Thad Ritchards | April 29, 2007 1:05 PM

Post a comment





Tetrap.com Site Map