add more.../less... link where the content of a field is too long

app/assets/javascripts/application.js

@@ -24,6 +24,7 @@
 //= require almond
 //= require universal_viewer
 //= require pom_boot
+//= require more_link
 
 Blacklight.onLoad(function() {
   Initializer = require('pom_boot')

app/assets/javascripts/more_link.js

@@ -0,0 +1,31 @@
+$(document).ready(function() {
+    var value_id = $("#content").data("id");
+    var limitCharacters = 300;
+    var dl_children = $("#doc_"+value_id).find('ul');
+    dl_children.each(function(i, item){
+        var char_length = $(this).text().length;
+        if (char_length > limitCharacters) {
+           var displayedCharacters = $(this).text().substr(0,limitCharacters);
+           var hiddenCharacters = $(this).text().substr(limitCharacters, char_length - limitCharacters );
+           var html_ul_li =
+           displayedCharacters +
+           '<span class="morecontent">' + hiddenCharacters + 
+           '</span>&nbsp;&nbsp;<span><a href="" class="morelink">' + " ... More" + '</a></span>';
+           $(this).html(html_ul_li);
+           $(".morecontent span").hide();
+        }
+    })
+
+     $(".morelink").click(function(){
+        if($(this).hasClass("less")) {
+            $(this).removeClass("less");
+            $(this).html(" ... More");
+        } else {
+            $(this).addClass("less");
+            $(this).html(" ... Less");
+        }
+        $(this).parent().prev().toggle();
+        $(this).prev().toggle();
+        return false;
+    })
+});

app/assets/stylesheets/application.scss

@@ -273,3 +273,11 @@ li {
   color: white;
   text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
 }
+
+a.morelink {
+  font-weight: bold;
+}
+
+.morecontent {
+  display: none;
+}

app/views/catalog/show.html.erb

@@ -1,4 +1,4 @@
-<div id="content" class="<%#= show_content_classes %>col-sm-12 show-document">
+<div id="content" class="<%#= show_content_classes %>col-sm-12 show-document" data-id="<%= @document.id %>">
   <%= render_document_main_content_partial %>
 </div>