The last time I have updated the design (somewhere in September 2015) for the Archives page I added some jQuery code so you could expand/collapse months in an attempt to keep the page (height wise) fairly small.

But ever since I saw the following tweet I had the feeling I should revisit the coding of the Archives page

You Don't Need JavaScript - https://t.co/M3u4lOUxst - Common JS components implemented in CSS only. Demos included pic.twitter.com/ZY68FXt1M9

— Umar Hansa (@umaar) July 11, 2016

On the linked GitHub repo is a demo available for ‘Accordion/Toggle’ which is very similar to what I had implemented for the Archives page.

It took me some time to figure out how it actually worked, but finally felt comfortable enough to give it a try. Since I didn’t know how much time and effort it would take to get it right I created a project using Coda for easy offline editting and testing. This made it easier to try out different things without the need to constantly wait for Dropbox to sync over all my changes.

HTML (archives.html)

The following old code 12

{{#months}}
<h2 class="archive">{{month}} {{year}} <span title="Click to hide/show posts" class="count" id="{{month}}{{year}}">({{entries.length}} posts)</span></h2>
<div class="archive" id="{{month}}{{year}}">
{{#entries}}
    <span class="archive">{{#formatDate}}DD{{/formatDate}}:</span> <a class="archive" href="{{url}}">{{title}}</a><br />
{{/entries}}
</div>
{{/months}}

has been replaced with the following code 12

{{#months}}
<div class="month">
    <h2 class="archive">{{month}} {{year}} <label for="{{month}}{{year}}" title="Click to hide/show posts">({{entries.length}} posts)</label></h2>
    <input class="opener" type="checkbox" id="{{month}}{{year}}"/>
    <div class="entries">
    {{#entries}}
        <span class="archive">{{#formatDate}}DD{{/formatDate}}:</span> <a class="archive" href="{{url}}">{{title}}</a><br />
    {{/entries}}
    </div>
</div>
{{/months}}

CSS

As before the following piece of CSS ensures that when loading the page only the three most recent months are expanded to show the list of articles for those months as well as regular CSS for styling the elements 638

/* Styling for the archive page */
h2.archive {
  margin-bottom: 0px;
  margin-top: 20px;
  font-variant: small-caps;
}

a.archive {
  font-size: medium;
}

label {
  font-size: smaller;
  font-weight: bold;
  font-variant: normal;
  cursor: pointer;
  border-bottom: 1px dotted blue;
}

span.archive {
  font-size: medium;
  font-weight: bold;
  margin-left: 20px;
}

/* Hide the checkboxes */
.opener { display:none; }

/* First three months */
.month:nth-child(-n+3) .entries { display:block; }
.month:nth-child(-n+3) .opener:checked ~ .entries { display:none; }

/* All except the first three months */
.month:nth-child(1n+4) .entries { display:none; }
.month:nth-child(1n+4) .opener:checked ~ .entries { display:block; }

Thanks a lot to David for helping out with the proper CSS.

jQuery

The following jQuery code has been removed from the template archives.html 26

<script>
$('span.count').click(function() {
  var id = $(this).prop('id');
  $( 'div#'+id ).toggle();
});
</script>