work-item.html

<div class="thumb-wrap">
  <div class="thumb-container">
    {% for project_hash in site.data.work.projects %}
    {% assign project = project_hash[1] %}
    <a aria-label="{{ project.engagement-type }}: {{ project.name }}; Tenure: {{ project.tenure | replace: '-','to' }}" 
    class="thumb-unit-wrap" href="/work/{{project.folder}}/page">  
      <div class="thumb-unit">
        <img src="assets/img/work/{{project.folder}}/thumb.{{project.thumb}}" alt="" />
        <span class="" aria-hidden=true>{{ project.tenure }}</span>
      </div>
      <div class="thumb-overlay">
        <strong aria-hidden=true>{{ project.name }}</strong>
      </div>
    </a>
    {% endfor %}
  </div>
</div>

workLoad.js

// do this when a work item is clicked
function workLoad($this) {

  $.ajaxSetup({ cache: true });

  var newTitle = $this.find('strong').text(),
      spinner = '<div class="loader">Loading...</div>',
      href = $this.attr("href"),
      newHTML = href.substr(0, href.indexOf("/page") + 1);
    
  $('.project-load').html(spinner).load(newHTML, function() {
    $this.attr("aria-expanded", "true");
    $(".work-wrap").attr("aria-hidden", "false");
    $('.project-title').text(newTitle)
      .attr('aria-label', 'Project or Engagement details: ' + newTitle).focus();
  });
}

// do this when go back to the list
$('.work-container').hide(800, function() {
  $(".work-wrap").attr("aria-hidden", "true");
  $this.attr("aria-expanded", "false").focus();
});