1,804 articles and 15,407 comments as of Monday, December 27th, 2010

Tuesday, January 13, 2009

JQuery for Everyone: Expand/Collapse All Groups

Erwin gave me another great idea from Stump the Panel.

We have a document library with a view using a grouped by.
We would like to make it possible to collapse all expanded records with one click.

As much as I try to avoid jQuery becomming a hammer and seeing everything as a nail, this is one of those prime examples of a simple but elegant solution to close a gap in the List View Web Part functionality.

(UPDATED!).

UPDATE: 1/15/2009 – Larry pointed out that nested groups still tried to trigger even if they were not visible which caused some looping. I added the :visible filter to the selectors for the code snippet which seems to work much better for nested groups.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function collapseGroups() {
	$("img[src='/_layouts/images/minus.gif']:visible").parent().click();
}
function expandGroups() {
	$("img[src='/_layouts/images/plus.gif']:visible").parent().click();
}
$(function() {
	var expandAll = "<a href='#' onClick="
		+'"'+"this.href='javascript:expandGroups()'"
		+'"><img title="expand all groups" style="border:none;" alt="expand all" src="/_layouts/images/collapseplus.gif"></a>';
	var collapseAll = "<a href='#' onClick="+'"'
		+"this.href='javascript:collapseGroups()'"
		+'"><img title="collapse all groups" style="border:none;" alt="collapse all" src="/_layouts/images/collapseminus.gif"></a>';
	$("td.ms-toolbar[width='99%']").append(expandAll).append(collapseAll);
});
</script>

Update (7/28/2009):
This version tested with jQuery 1.3.2 and IE8:

<script type="text/javascript">
if(typeof jQuery=='undefined'){
	var jQPath = 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/';
	document.write('<script src="',jQPath,'jquery.min.js" type="text/javascript"><\/script>');
}
</script>
<script type="text/javascript">
/*
 * Copyright (c) 2009 Paul Grenier (endusersharepoint.com)
 * Licensed under the MIT (MIT-LICENSE.txt)
 */
$(function(){
	jQuery.groups = {
		collapse : function() {
			$("img[src*='minus.gif']:visible").parent().click();
		},
		expand : function() {
			$("img[src*='plus.gif']:visible").parent().click();
		}
	};
	var expandAll = "<a href='#' onClick="
		+'"'+"this.href='javascript:$.groups.expand()'"
		+'"><img title="expand all groups" style="border:none;" alt="expand all" src="/_layouts/images/collapseplus.gif"></a>',
	collapseAll = "<a href='#' onClick="+'"'
		+"this.href='javascript:$.groups.collapse()'"
		+'"><img title="collapse all groups" style="border:none;" alt="collapse all" src="/_layouts/images/collapseminus.gif"></a>';
	$("table.ms-menutoolbar td.ms-toolbar[width='99%']").append(expandAll).append(collapseAll);
});
</script>
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

56 Responses to “JQuery for Everyone: Expand/Collapse All Groups”
  1. David Wallach says:

    I was wondering if there is a SharePoint 2010 version and if you have a version that allows the user to individually expand and collapse groups with an effect like the slideToggle method

    • David – I’ll jump in to say Paul probably isn’t updating this against SharePoint 2010. His focus has shifted to other “real world” projects, so we’ll just have to count on you providing us with a solution once you work it out. — Mark

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!