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>
- JQuery for Everyone: Accordion Left Nav
- JQuery for Everyone: Print (Any) Web Part
- JQuery for Everyone: HTML Calculated Column
- JQuery for Everyone: Dressing-up Links Pt1
- JQuery for Everyone: Dressing-up Links Pt2
- JQuery for Everyone: Dressing-up Links Pt3
- JQuery for Everyone: Cleaning Windows Pt1
- JQuery for Everyone: Cleaning Windows Pt2
- JQuery for Everyone: Fixing the Gantt View
- JQuery for Everyone: Dynamically Sizing Excel Web Parts
- JQuery for Everyone: Manually Resizing Web Parts
- JQuery for Everyone: Total Calculated Columns
- JQuery for Everyone: Total of Time Differences
- JQuery for Everyone: Fixing Configured Web Part Height
- JQuery for Everyone: Expand/Collapse All Groups
- JQuery for Everyone: Preview Pane for Multiple Lists
- JQuery for Everyone: Preview Pane for Calendar View
- JQuery for Everyone: Degrading Dynamic Script Loader
- JQuery for Everyone: Force Checkout
- JQuery for Everyone: Replacing [Today]
- JQuery for Everyone: Whether They Want It Or Not
- JQuery for Everyone: Linking the Attachment Icon
- JQuery for Everyone: Aspect-Oriented Programming with jQuery
- JQuery for Everyone: AOP in Action - loadTip Gone Wild
- JQuery for Everyone: Wiki Outbound Links
- JQuery for Everyone: Collapse Text in List View
- JQuery for Everyone: AOP in Action - Clone List Header
- JQuery for Everyone: $.grep and calcHTML Revisited
- JQuery for Everyone: Evolution of the Preview
- JQuery for Everyone: Create a Client-Side Object Model
- JQuery for Everyone: Print (Any) Web Part(s) Plugin
- JQuery for Everyone: Minimal AOP and Elegant Modularity
- JQuery for Everyone: Cookies and Plugins
- JQuery for Everyone: Live Events vs. AOP
- JQuery for Everyone: Live Preview Pane
- JQuery for Everyone: Pre-populate Form Fields
- JQuery for Everyone: Get XML List Data with OWSSVR.DLL (RPC)
- Use Firebug in IE
- JQuery for Everyone: Extending OWS API for Calculated Columns
- JQuery for Everyone: Accordion Left-nav with Cookies Speed Test
- JQuery for Everyone: Email a List of People with OWS
- JQuery for Everyone: Faster than Document.Ready
- jQuery for Everyone: Collapse or Prepopulate Form Fields
- jQuery for Everyone: Hourly Summary Web Part
- jQuery for Everyone: "Read More..." On a Blog Site
- jQuery for Everyone: Slick Speed Test
- jQuery for Everyone: The SharePoint Game Changer
- JQuery For Everyone: Live LoadTip
I hope the end result gets posted here. Looking forward to trying it. I also could not get the first version to work.
@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.
“…content webeditor…”
should be
“…Content Editor Webpart…”
Hi, One more question, is there a way to apply this just to a single webpart on a dashboard or team site home page?
@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?
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?
@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?
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.
@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.
The script does not work even without other scripts on the web. I even tried it on a frsh list to no avail.
I’d like to use this on a DataFormWebPart… is that possible?
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?
Not sure yet. We’re in the process of standing up a 2010 site so we can see the underlying presentation layer. — Mark
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!
Nevermind! I added a CEWP to the bottom of the webpart page and it collapsed the text in all of the webparts – perfect!
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?
JGil,
Yes this can be done. I have updated my site to reflect the section of code in Paul’s solution that can be changed to make this happen. You can find that here: http://www.bitsofsharepoint.com/ExamplePoint/Site/ListExpandTextField.aspx
Peter,
This is exactly what I needed.
Thanks a bunch!
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?
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
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?
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?
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.
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();
});
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
I tried to use the same with SharePoint 2010. I wasn’t able to get it work. Any suggestions?