I am trying to collapse my sharepoint list where I have large text columns, basically following the same code snippert as mentioned here




but I am having problems getting it to work for SP2013

The code that I add as a CEWP at the top of the list page is as follow

<script type="text/javascript">
if(typeof jQuery=='undefined'){
    var jQPath      = 'https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
document.write('<script src="',jQPath,'"    type="text/javascript"><\/script>');
<style type="text/css">
.expandText     {height:auto;}
.collapseText   {height:26px;overflow:hidden}
<script type="text/javascript">
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
alert('Point 1');
function collapseText(group){
alert('Point 2');
if (!group) group = "#MSO_ContentTable";
alert('Point 3');
   var html = "<img alt='collapseText' style='cursor:pointer;' src='https://.../menudark.gif'/>";
alert('Point 4');
    $(group+" td.ms-vb2>div").each(function(i,e){
    alert('point 5');  
               alert('point 6');  
                  if (e.clientHeight > 35){
    $(group+" img[alt='collapseText']").click(function(event){
                alert('point 7');
alert('Point 8');
$(function() {
alert('point 9');
alert('point 10');

When displaying the list, the alert trace is as follows:

Point 9 Point 2 Point 3 Point 4 Point 8 Point 10

There seems to be some problem with the code $(group+" td.ms-vb2>div").each(function(i,e){

Has anyone used this code for SP2013?

Thanks for any help!

1 Answer 1


Instead of using Jquery to manipulate the view of columns in your SharePoint list, I'll suggest you to use Client Side Rendering (CSR), it's very powerful and would suit your need. You can write HTML for your need.

(function () {
    // Create object that have the context information about the field that we want to change it output render  
    var linkFieldContext = {};
    linkFieldContext.Templates = {};
    linkFieldContext.Templates.Fields = {        
        "Comments": { "View": CommentRendering}


function CommentRendering(ctx)
    var htmlStr = "";
    var itemId = ctx.CurrentItem.ID;
    var itemTitle = ctx.CurrentItem.Title
    htmlStr += "<input id='click"+itemId+"' type='button' value='click me'></input>";                    
    return htmlStr;

This will render your multline text field as button but you can manipulate it to show any html content.

  • I have followed the instructions here : code.msdn.microsoft.com/office/… to get some more background, but there is no option to go to List view web-part properties. I can add a webpart, but I don't know if this is the same. I think our site is locked down to much for this option to appear...
    – southskies
    Commented Jul 9, 2015 at 8:29
  • Edit the page, then edit the listview. there you'll see the jslink property
    – Taran Goel
    Commented Jul 9, 2015 at 8:33
  • Yes, I found that property finally. I copied that code in verbatim. It had no effect. Nothing showed in the console either.
    – southskies
    Commented Jul 10, 2015 at 1:26
  • You need to first create a JS file then apply it. Try with a simple rendering first.
    – Taran Goel
    Commented Jul 10, 2015 at 1:28
  • Yes, this is what I did. I'll add some alerts in to see if it is going anywhere near the code....
    – southskies
    Commented Jul 10, 2015 at 1:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.