Read more.. or more... link in AlfSortablePaginatedList - comments column

Question

I am using AlfSortablePaginatedList to render set of rows and columns. In one of a cell, I would like to display first 50 or 100 characters with "more..." link text. If the user click more, then I need to display the remaining content.

Something like , http://jsfiddle.net/X5r8r/1156/

Can you please some idea how to do that?

Here is the code snippet.

  headerWidgets.push({
     name: "alfresco/documentlibrary/views/layouts/HeaderCell",
     config: {
         label: "Comments",             
         sortable: false
     }
  });
  rowWidgets.push({
     name: "alfresco/documentlibrary/views/layouts/Cell",
     config: {
         widgets: [{
             name: "alfresco/renderers/Property",
             config: {
                 propertyToRender: "Comments",
                 additionalCssClasses:"limitText"
             }
         }]
     }
  });

I added custom css, to get the "..." in the comments column, I'm not sure, how to make it clickable and display the remaining contents.

 .limitText {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   line-height: 16px;     /* fallback */
   max-height: 250px;      /* fallback */
   -webkit-line-clamp: 3; /* number of lines to show */
   -webkit-box-orient: vertical;    
}

Aikau version : 1.0.67 Alfresco : 5.0.2