Home > SharePoint Advancements > How to collapse text in lists views

How to collapse text in lists views

There might come a time where a customer would like to have a custom list built with a multiple line column to display a long list of text, but once the list starts to grow and more list items are added the list view might become to cumbersome and hard to read do to the amount of scrolling needed.
 
You can limit the amount of text lines to show for the list view by using a little bit of JQuery and a Content editor web part to collapse and uncollapse the text.
 
To get started, add a content editor web part to your list view.
 
Edit the content editor web part and add this JQuery code to Source Editor:
 
<script> 
if(typeof jQuery==’undefined’){ 
var jQPath = ‘https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js&#8217;
document.write(‘<script src=”‘,jQPath,'”><\/script>’); 

</script> 
<style> 
.expandText     {height:auto;} 
.collapseText   {height:26px;overflow:hidden} 
</style> 
<script> 
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) { 
$(“#tbod”+groupName+”_”).attr(“isloaded”,isLoaded) 
.html(htmlToRender) 
.show(“fast”,collapseText(“#tbod”+groupName+”_”)); 

function collapseText(group){ 
if (!group) group = “#MSO_ContentTable”; 
var html = “<img alt=’collapseText’ style=’cursor:pointer;’ src=’/_layouts/images/menudark.gif’/>”; 
$(group+” td.ms-vb2>div”).each(function(i,e){ 
$(e).css({display:”inline-block”}); 
if (e.clientHeight > 35){ 
$(e).toggleClass(“collapseText”) 
.prepend(html); 

}); 
$(group+” img[alt=’collapseText’]”).click(function(event){ 
$(event.target).parent().toggleClass(“collapseText”); 
}); 

$(function() { 
collapseText(); 
}); 
</script>
 
Save and close the Content Editor Webpart. 
You should now be able to collapse and uncollapse large text fields in a list view.
 
To change the number of lines to be show then edit this line:
.collapseText   {height:26px;overflow:hidden}
And change the height in pixels.
 
Enjoy!

Advertisements
  1. Clem
    December 30, 2011 at 5:21 pm

    Didn’t work for me. Changed all the double quotes and single quotes. Page displays the same. Put the CEWP at the bottom of the page.

    • January 9, 2012 at 1:30 pm

      Hi Clem,

      Just tested this out in my environment and it works just fine. My test environment consists of a Custom List of two columns (Title & Action). My Action column is set as a multiple lines text column, but it shouldn’t matter. I placed my CEWP under the List View webpart. Make sure the text you want to collapse has enough lines to allow for the column to collapse. If it does not it will not collapse. You will see a ‘downward’ arrow next to your columns name to indicate that there is data that is collapsed.

  2. Naveenkumar T
    August 29, 2013 at 3:09 pm

    Hi, Can you please post script for Sharepoint 2010 version…?

  3. December 15, 2013 at 10:12 am

    Not working for me in sharepoint 2010. I have also changed the path to the jQuery to my local copy which is working with other scripts on the same site, and also changed the gif location per the sharepoint 2010 folder of pictures. Still – no good. any clue what can be done?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: