Add a Blogger-like collapsible archive block to your Drupal 7 site

A few years back I took advantage of Jack O'Connor's great how-to article to create a collapsible content archive block in Drupal 6. I'm now developing a Drupal 7 site and needed to do the same type of thing. Here's basically the same process, but for Drupal 7. This article assumes that you've installed the Views module (including its prerequisite, Chaos tools suite), and understand how to add JavaScript and a custom stylesheet to your Drupal site. You can see a working example here.

Update: Emilio commented below with a nice way to add node counts to each month. I've added his suggestions to my procedure. 

1. Create a new View

Here's the view exported to a text file. Import it as a new view and you can skip to step 3. Otherwise, carry on...

  • Navigate to the Views page (/admin/structure/views/add) and create a new view (figure 1)drupal7-collapsible-archive1
  • Give the view a name and a description (optional). I called mine 'Collapsible Archive'.
  • Set your desired Show parameters. I went with 'Show Content of type All tagged with [empty] sorted by Newest first' since my archive is for blog articles.
  • Uncheck 'Create a page' and check 'Create a block'
  • Give the block a title and set 'Display format' to 'HTML list'
  • Leave 'Use a pager' unchecked and click 'Continue & edit'

2. Set the Block details

  • drupal7-collapsible-archive2Under FIELDS, add a 'Content: Post date' field, then click its title and do the following (figure 2):
    • Uncheck 'Create a label'
    • Check 'Exclude from display'
    • Set 'Date format' to 'Custom' and enter 'F Y' under 'Custom date format'
    • Expand the REWRITE RESULTS section and do the following (figure 3):drupal7-collapsible-archive3
      • Check 'Rewrite the output of this field'
      • Enter this in the 'Text' field: <span class="collapse-icon">►</span> <span class="collapse-created">[created]</span>
      • Click 'Apply' to close the popup
      • Click 'Save' to save your progress
  • Under FILTER CRITERIA, add a 'Content Type (= Article) filter and any additional filters according to your needs
  • drupal7-collapsible-archive5In the Settings popup for HTML List (figure 4), apply these settings:
    • Grouping field Nr. 1: Content: Post date
    • Wrapper class: 'item-list collapsible-archive' (the second class can be whatever you like--just edit your jQuery accordingly)
    • Click 'Apply' to save and close the popup
    • Click 'Save' to save your progress

At this point you should see a representation of the archive in the preview below. The arrow should appear next to the months and the articles should be listed below each.

3. Add the styles and jQuery functions

  • In your custom stylesheet, add the following CSS. If you used a different class earlier, update the style selectors to reflect that.

    div.view-collapsible-archive h3 {
        cursor: pointer;
        margin: 0;
        font-size: 1em;
        font-weight: normal;
        padding: 6px 0;
    }
    div.view-collapsible-archive ul {
        list-style: none;
        width: 220px; /* prevents slide jump in jQuery - modify as needed */
    }
    div.view-collapsible-archive ul li {
        background: none;
        line-height: 130%;
        padding: 3px 0 5px;
    }
  • In your custom JavaScript file, add the following jQuery. Again, update class selectors as needed.

    jQuery(document).ready(function($) { 
        // init: collapse all groups except for the first one
        $(".view-collapsible-archive ul").each(function(i) {
            if (i==0) {
                $(this).siblings("h3").children(".collapse-icon").text("▼");
            } else {
                $(this).hide();
            }
        });

        // click event: toggle visibility of group clicked (and update icon)
        $(".view-collapsible-archive h3").click(function() {

            var icon = $(this).children(".collapse-icon");

            $(this).siblings("ul").slideToggle(function() {
                (icon.text()=="▼") ? icon.text("►") : icon.text("▼");
            });
        }); // count the nodes for each month and display it in the tree (thanks, Emilio!) var cant = 0;
    $(".item-list.collapsible-archive").children("h3").each(function() {
    $(this).siblings("ul").children("li").each(function(i) {
    cant++;
    });

    $(this).children(".collapse-created").text(function() {
    return $(this).text() + ' (' + cant + ')';
    });
    cant = 0;
    });

    });

4. Publish the Block

  • Navigate to the Blocks listing (/admin/structure/blocks)
  • Your new block should appear in the Disabled section--select a position for it and click 'Save blocks'

Your block should now appear on your site.

iwarblk guildwht    profile for isherwood on Stack Exchange, a network of free, community-driven Q&A sites