1,804 articles and 14,442 comments as of Tuesday, January 11th, 2011

EndUserSharePoint has combined resources with NothingButSharePoint.com. You can now find End User (Mark Miller), Developer (Jeremy Thake) and IT Pro SharePoint (Joel Oleson) content all in one place!

This site is a historical archive and is no longer being updated. Please update your favorites, bookmarks and RSS feeds.

NothingButSharePoint.com
Friday, February 20, 2009

JQuery for Everyone: Collapse Text in List View

This idea comes from kidtroopa in Stump the Panel:

I have a comments multiline text column in a sharepoint list that I would like to limit the number of rows displayed when someone is viewing the list.

Take a look at a screencast of the solution and if you find it useful, cut and paste the code below into a Content Editor Web Part (CEWP):

<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>');
}
</script>
<style type="text/css">
.expandText 	{height:auto;}
.collapseText 	{height:26px;overflow:hidden}
</style>
<script type="text/javascript">
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:has(>div)").toggleClass("collapseText")
		.prepend(html);
	$(group+" img[alt='collapseText']").click(function(event){
		$(event.target).parent().toggleClass("collapseText");
	});
}
$(function() {
	collapseText();
});
</script>

UPDATE: 2009-04-09

Based on a comment from Matt, I’ve updated this script to check the height of the td before applying the expand/collapse code. This seems to work in IE and FF. This version uses a simpler selector because my test list was multiline text (not HTML).

<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>');
}
</script>
<style type="text/css">
.expandText 	{height:auto;}
.collapseText 	{height:26px;overflow:hidden}
</style>
<script type="text/javascript">
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>

Paul Grenier

View all entries in this series: PaulGrenier-JQuery for Everyone»
Entries in this series:
  1. JQuery for Everyone: Accordion Left Nav
  2. JQuery for Everyone: Print (Any) Web Part
  3. JQuery for Everyone: HTML Calculated Column
  4. JQuery for Everyone: Dressing-up Links Pt1
  5. JQuery for Everyone: Dressing-up Links Pt2
  6. JQuery for Everyone: Dressing-up Links Pt3
  7. JQuery for Everyone: Cleaning Windows Pt1
  8. JQuery for Everyone: Cleaning Windows Pt2
  9. JQuery for Everyone: Fixing the Gantt View
  10. JQuery for Everyone: Dynamically Sizing Excel Web Parts
  11. JQuery for Everyone: Manually Resizing Web Parts
  12. JQuery for Everyone: Total Calculated Columns
  13. JQuery for Everyone: Total of Time Differences
  14. JQuery for Everyone: Fixing Configured Web Part Height
  15. JQuery for Everyone: Expand/Collapse All Groups
  16. JQuery for Everyone: Preview Pane for Multiple Lists
  17. JQuery for Everyone: Preview Pane for Calendar View
  18. JQuery for Everyone: Degrading Dynamic Script Loader
  19. JQuery for Everyone: Force Checkout
  20. JQuery for Everyone: Replacing [Today]
  21. JQuery for Everyone: Whether They Want It Or Not
  22. JQuery for Everyone: Linking the Attachment Icon
  23. JQuery for Everyone: Aspect-Oriented Programming with jQuery
  24. JQuery for Everyone: AOP in Action - loadTip Gone Wild
  25. JQuery for Everyone: Wiki Outbound Links
  26. JQuery for Everyone: Collapse Text in List View
  27. JQuery for Everyone: AOP in Action - Clone List Header
  28. JQuery for Everyone: $.grep and calcHTML Revisited
  29. JQuery for Everyone: Evolution of the Preview
  30. JQuery for Everyone: Create a Client-Side Object Model
  31. JQuery for Everyone: Print (Any) Web Part(s) Plugin
  32. JQuery for Everyone: Minimal AOP and Elegant Modularity
  33. JQuery for Everyone: Cookies and Plugins
  34. JQuery for Everyone: Live Events vs. AOP
  35. JQuery for Everyone: Live Preview Pane
  36. JQuery for Everyone: Pre-populate Form Fields
  37. JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
  38. Use Firebug in IE
  39. JQuery for Everyone: Extending OWS API for Calculated Columns
  40. JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
  41. JQuery for Everyone: Email a List of People with OWS
  42. JQuery for Everyone: Faster than Document.Ready
  43. jQuery for Everyone: Collapse or Prepopulate Form Fields
  44. jQuery for Everyone: Hourly Summary Web Part
  45. jQuery for Everyone: "Read More..." On a Blog Site
  46. jQuery for Everyone: Slick Speed Test
  47. jQuery for Everyone: The SharePoint Game Changer
  48. JQuery For Everyone: Live LoadTip
 

Please Join the Discussion

78 Responses to “JQuery for Everyone: Collapse Text in List View”
  1. Robert Sandoval says:

    I hope the end result gets posted here. Looking forward to trying it. I also could not get the first version to work.

  2. Rob says:

    @Oscar:
    I’d be happy to send it to you, but i don’t have your emailaddress. I’m not a moderator here, so I can’t get it from your comments…
    Easiest thing is to copy the part from my previous post between the [quote] and [/quote] tags an d past it to a content webeditor. Make sure you replace every ” and ‘ with ‘normal’ quotes, because in my comments the are automatically replaced with ‘italic’ quotes.

  3. Rob says:

    “…content webeditor…”
    should be
    “…Content Editor Webpart…”

  4. Oscar says:

    Hi, One more question, is there a way to apply this just to a single webpart on a dashboard or team site home page?

  5. Oscar says:

    @Paul,

    One more suggestion or challenge to improve this. Can you combine a tactic from the improvements you made to the left-nav script, and add cookies to this so that it remembers what you had open or closed upon a page refresh?

    IS there a way to only get this to run on one webpart on a page that has multiple webparts?

  6. JasonB says:

    How do I go about changing where the windows opens? It is currently opening very close to where the mouse cursor is, which is blocking the names of my list items. How would I go about offsetting it a bit to the right?

  7. AutoSponge says:

    @JasonB,

    Are you saying that the list item names are long and therefore collapsing? Only multi-line text should collapse in a standard web part. Can you provide more info?

  8. JamieH says:

    For some reason I cannot get this to function on my list. It is a custom list with multi-line fields (among others). There is also a filter and category expand/collapse webpart on the page. I have tried numerous versions of the code but non of them will do anything. Can someone please help me? Thanks.

  9. AutoSponge says:

    @JamieH,

    Does this script work when the other scripts are not on the page? I’m not sure what the other scripts are, but it’s possible they are not playing nice-nice.

  10. JamieH says:

    The script does not work even without other scripts on the web. I even tried it on a frsh list to no avail.

  11. I’d like to use this on a DataFormWebPart… is that possible?

  12. TeddybearsStockholm says:

    I am currently using this script in a list in MOSS2007 and it works great. If/when we upgrade to SP2010, will this script break or will it carry over?

  13. Litehouse says:

    Is there a way to get this to work in a web-part view (boxed view)? This works great on a list view, but I have a webpart page that displays a list in a webpart using the list view I choose, but does not use this script – that would be very cool. Thanks – this was very helpful!

  14. Litehouse says:

    Nevermind! I added a CEWP to the bottom of the webpart page and it collapsed the text in all of the webparts – perfect!

  15. JGil says:

    Would there be a way to display ‘Expand text’ when the field is collapsed, but then change the text to ‘Collapse text’ when the field is expanded?

  16. AndyG says:

    Just found this site, great function in principal however implementing on my list it collapses one column but leaves another expanded. Can this be fixed, and/or is there a way to target a particular column?

  17. kelly says:

    Hi,

    I have some users that are not allowed access to the internet hence they cannot get the JQuery from the http://apis.google.com website.

    I have managed to download the Jquery 1.2.6 but simply replacing the url with my local version doesn’t work. can you help explain the problem for me?

    Thanks

    Kelly

  18. Sara says:

    I got this working on a list view. But I cannot get it to work on a dataview. I still use a Content Editor Webpart at the bottom of the page, but it isn’t working. Any other thing I need to do to get this to work in a DataView?

  19. Meghan wong says:

    This is great. I usually check out your site for new stuff or older.

    I was wondering if there is a way to show all versioning (appended entries) in a multiline text on a list view. At this point, there is only a link within the View Entries, but I wanted to see all versioning in the List View. Is this possible?

  20. Dustin says:

    This functionality is exactly what I have been looking to find for more than a year. It works great, and very easy to add. When I print my SharePoint list, however, all text in my multi-line field prints, rather than showing as truncated, as it does on-screen. Any idea how to force a printout to include only the truncated (collapsed) text? Thanks.

  21. Michael says:

    Hello Paul,
    I would just like to suggest a minor improvement. Working with an version (I guess it is also yours) havin additional text like “Expand Text” and “Collapse Text” right to the small black triangel.

    I have just tried to replace the Englisch Text with German Text. Replacing it direct at the code works like the original with english text. (Expand = Ausklappen; Collapse = Einklappen) Now, I am looking how to use String Variables instead of hardcoded text with this function. That will allow to use a explanation text in other languages. Unfortunately I do not know how to set up String variables and how to concatenate with remaining content. May I ask for help?

    My snapshot below.

    Kind regards, Michael

    PS: Do not know where to post an NothingButSharePoint….

    function collapseText(group){
    if (!group) group = “#MSO_ContentTable”;
    var html = “Aufklappen“;
    $(group+” td.ms-vb2>div:has(>div)”).toggleClass(”collapseText”).prepend(html);
    $(group+” [rell='collapseText']“).click(function(event){
    var checkExpand = $(this).text();
    $(event.target).parent().toggleClass(”collapseText”);
    if( checkExpand == ‘Aufklappen’ ){
    $(this).text(’Zuklappen’);

    end;
    } else {
    if( checkExpand = ‘Zuklappen’ ){
    $(this).text(’Aufklappen’);

    }}
    });
    }

    $(function() {
    collapseText();
    });

  22. Michael says:

    Hello Paul, sorry, some of the code above did not appear. That is my mistake. How to Post code here in a correct view?

    Kind regards
    Michael

  23. Pradeep says:

    I tried to use the same with SharePoint 2010. I wasn’t able to get it work. Any suggestions?

Trackbacks

Check out what others are saying about this post...



Notify me of comments to this article:


Speak and you will be heard.

We check comments hourly.
If you want a pic to show with your comment, go get a gravatar!