Expanding archive listings

I've changed the HTML of my HTML header and archive pages so that the monthly archives and category archives do not display expanded. Instead, they are presented contracted and can be expanded with a click on the respective headers. It bugged me that the pages for these were so long when the archives are not necessarily used.

Update 2009-03-27: I did the same thing for Recent Comments and Recent Entries. Here are the required edits:

1. Widgets
   • Recent Comments widget
   • Recent Entries widget
   • Monthly Archives widget
   • Category Archives widget

   Changes in bold, metanames in italics.

       <a href="javascript:animatedcollapse.toggle('WidgetId')">
       <h3 class="widget-header">Monthly Archives</h3>
       </a>
       <div id="WidgetId" class="widget-content">
   

2. HTML Head template

   Add javascript to the HEAD section of the page. 'divs' matches the names given to each of the div elements in the previous step.

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="/mt-static/js/animatedcollapse.js">
   /***********************************************
   * Animated Collapsible DIV v2.2- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
   * This notice MUST stay intact for legal use
   * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
   ***********************************************/
   </script>
   
   <script type="text/javascript">
   divs = [ 'Categories', 'MonthlyArchives', 'RecentEntries', 'RecentComments' ]
   for (x in divs) { animatedcollapse.addDiv(divs[x]) }
   animatedcollapse.init()
   
   $(document).ready(function() {
       for (x in divs) { animatedcollapse.toggle(divs[x]) }
   });
   </script>
   

3. animatedcollapse.js

   Copy this file from dynamicdrive.com to /mt-static/js/animatedcollapse.js