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.

3 Answers 3


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
    Commented Dec 14, 2011 at 15:06
  • Found the answer: Just remove the :visible from the statement and it works on the hidden grouped elements too :)
    – Alex C
    Commented Dec 15, 2011 at 4:41
  • Tried this in SP 2010. Could not get it to work. Thanks anyway.
    – Clem
    Commented Jan 4, 2012 at 13:13
  • @Clem Do you get an error message or something?
    – SPSinan
    Commented Jan 5, 2012 at 9:11
  • This doesn't seem to work with SP2010. Any ideas with SP 2010 Thanks
    – naijacoder
    Commented Dec 17, 2012 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 and acknowledge you have read our privacy policy.

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