Expand/collapse all grouped items in views of a page

Question

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.

Answer 1

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() { 
    $("img[src*='plus.gif']:visible").parent().click();
}

Answer 2

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
        $("img[src$='plus.gif']").parent().trigger("click");
        $("img[src$='plus.gif']").parent().trigger("click");
        $("img[src$='plus.gif']").parent().trigger("click");
    }

Answer 3

This works too.

<script type="text/javascript">

    function expandAll() {
        $('img[alt="expand"]').click();
    }

    function collapseAll() {
        $('img[alt="collapse"]').click();
    }

    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.
    });
</script>