Cleaning Up The Archives: Sometimes It’s Ok To Hide The Past?

First, let me say, thank you Larry for the rad rug sweep picture! And yes, the Archive section, which groups posts by month, got quite long, as we’ve been blogging here at Ninthlink for over two years now. In the interest of opening up more real estate (virtual estate?), Craig suggested we put a dropdown that filters the archives by year, so I did. Or did I suggest that, and then Craig told me how to make it look more pretty? Who knows. Either way, its there. Do you like it? Let us know (comment, please?)! And in case you are interested in geeking out at the bit of jQuery it took to make it all possible, read on…

So, down to the nitty gritty. I’ve talked some jQuery before, and I still dig it. So this time, what we had was:


<h2 class="widgettitle">Archives</h2>
<ul>
<li><a title="January 2009" href="...">January 2009</a> (38)</li>
<li><a title="December 2008" href="...">December 2008</a> (17)</li>
...


and we want to insert a dropdown (select) with options for the years, and then show/hide the list of posts based on what year is selected. So a bit more jQuery goodness…


$('#archives h2.widgettitle').append('<select id="archiveselect"><option>2009</option><option>2008</option><option>2007</option></select>').children('select').change(function() {
var yr = $(this).val();
$('#archives li a:not([title$="'+yr+'"])').parent().hide();
$('#archives li a[title$="'+yr+'"]').parent().show();
}).trigger('change');


• Add a select object with options for 2009 / 2008 / 2007 in next to the “Archives” header
• Bind a function to that select object, so when it changes, we see what year was selected, hide all list items NOT in that year, and show all list items that ARE in that year
• and then since we set that up, and by default the select object will be set to 2009 (the first option we gave it), we pretend that the selector just got changed to that year, and it handles hiding all pre-2009 entries from the list

Did I lose you?