Is there a way to add a button to a SharePoint 2010 page to expand all grouped items in all the list views on the page? This is the first (top) level grouping only, not the second level. These are simple (standard) list views created via the web UI, where we've grouped items on one or two columns. Thanks.


Yes this is possible. You can use some javascript to do that. Here is a post about this. http://alectang.com/blog/archive/2010/09/09/easy-expand-or-collapse-sharepoint-list-in-group-by-view.aspx

The trick is to find the little minus button and then click it:

function expandGroups() { 
  • 1
    Thanks, SPSinan. What if I have two levels of grouping and need all to be expanded? – Alex C Dec 14 '11 at 15:06
  • Found the answer: Just remove the :visible from the statement and it works on the hidden grouped elements too :) – Alex C Dec 15 '11 at 4:41
  • Tried this in SP 2010. Could not get it to work. Thanks anyway. – Clem Jan 4 '12 at 13:13
  • @Clem Do you get an error message or something? – SPSinan Jan 5 '12 at 9:11
  • This doesn't seem to work with SP2010. Any ideas with SP 2010 Thanks – naijacoder Dec 17 '12 at 4:47

one way for making sure all 3 levels are expanded

<script src="https://portal/SiteAssets/jsLibrary/jquery.1.9.1.min.js" type="text/javascript"></script>

$(document).ready(function () {
     // Wait until SP.JS has loaded before calling expandAll
    ExecuteOrDelayUntilScriptLoaded(expandAll, "sp.js");

    function expandAll(){
        //for making sure all 3 levels are expanded

This works too.

<script type="text/javascript">

    function expandAll() {

    function collapseAll() {

    var expandButton = "<a href='#' onClick="

    +'"' + "this.href='javascript:expandAll()'"

    + '">&nbsp;<img title="expand all groups" style="border:none;" alt="expand all" src="/_layouts/images/collapseplus.gif"></a>';

    var collapseButton = "<a href='#' onClick="

    +'"' + "this.href='javascript:collapseAll()'"

    + '">&nbsp;<img title="expand all groups" style="border:none;" alt="collapse all" src="/_layouts/images/collapseminus.gif"></a>';

    $(document).ready(function () {
        $(".div").append(expandButton).append(collapseButton); // select div where you would like to place the icons.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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