Add a NestedRelatedItems js module to handle toggling of related items.

app/assets/javascripts/application.js

@@ -26,6 +26,7 @@
 //= require blacklight_gallery
 //= require blacklight_heatmaps
 //= require blacklight_oembed
+//= require nested_related_items
 //= require openseadragon
 //= require spotlight
 //= require sul-exhibits-template

app/assets/javascripts/nested_related_items.js

@@ -0,0 +1,61 @@
+/* global NestedRelatedItems */
+
+(function (global) {
+  var NestedRelatedItems;
+
+  NestedRelatedItems = {
+    options: { itemSelector: 'li.mods_display_nested_related_item' },
+    init: function (el) {
+      var _this = this;
+
+      _this.listItems(el).each(function() {
+        $(this).removeClass('open');
+        _this.addToggleLink($(this));
+      });
+    },
+
+    listItems: function(list) {
+      return list.find(this.options.itemSelector);
+    },
+
+    addToggleLink: function(content) {
+      var dl = content.find('dl');
+
+      if(dl.length > 0) {
+        // Hide and remove the dl (so we can deal with just the text below)
+        dl.hide();
+        dl.remove();
+        // Replace the content of the list item with the current text wrapped in a link
+        content.html(this.linkElement(content));
+        // Add the dl back in
+        content.append(dl);
+      }
+    },
+
+    linkElement: function(content) {
+      var _this = this;
+      var link = $('<a href="javascript:;">' + content.text() + '</a>');
+      link.on('click', function() {
+        _this.toggleMetadata($(this));
+      });
+
+      return link;
+    },
+
+    toggleMetadata: function(item) {
+      var listItem = item.parent('li');
+      listItem.toggleClass('open');
+      listItem.find('dl').toggle();
+    }
+  };
+
+  global.NestedRelatedItems = NestedRelatedItems;
+}(this));
+
+Blacklight.onLoad(function () {
+  'use strict';
+
+  $('.mods_display_nested_related_items').each(function (i, element) {
+    NestedRelatedItems.init($(element)); // eslint-disable-line no-undef
+  });
+});