Thursday, July 10, 2014

Expand-Collapse All Groups in SharePoint 2013 List Views using jQuery

SharePoint doesn't has the ability to expand/collapse all groups in grouped list views. However, with jQuery we can bring Expand All-Collapse All buttons in SharePoint 2013 grouped list views. Just edit the grouped view page (Site Actions Gear >> Edit Page), add a "Script Editor" Web part and then place the below code in it.

jQuery for Expand-Collapse all items in grouped views in SharePoint 2013:

<script type="text/javascript" src="http://code.jquery.com/jquery-1.2.6.min.js"></script>

<script type="text/javascript">
  
    function expandAll() {
        $("img.ms-commentexpand-icon").click();
    }

    function collapseAll() {
        $("img.ms-commentcollapse-icon").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 () {
        $(".ms-pivotControl-container").append(expandButton).append(collapseButton);
    });
</script>
and here is the result:
Thanks to: https://www.nothingbutsharepoint.com/sites/eusp/pages/jquery-for-everyone-expandcollapse-all-groups.aspx for the idea!



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

14 comments :

  1. Thanks a lot worked like a charm .....

    ReplyDelete
  2. Is there any way to show Totals when the groups are collapsed?

    ReplyDelete
    Replies
    1. JT, You'll have to modify Data view Web part's XSL!

      Delete
  3. Wonderful!!!! Exactly what I was looking for - an updated expand/collapse script that could be used in Office 365. Thank you! If anyone else is like me and wants to get rid of the little underscore that shows up when you hover on one of the expand/collapse images, you can add a style attribute of text-decoration:none to the anchor tag.

    ReplyDelete
  4. Works great! Only issue so far is that the +/- sometimes disappear behind the "Find an item" box if there are multiple view tabs.

    ReplyDelete
  5. I wish you a good year :)

    I have a questions: Unfortunately it doesn't work for a gantview. Are they any possibilities to make it work? :)

    Thanks

    ReplyDelete
  6. This works beautifully!
    Thank you.

    ReplyDelete
  7. 5 you
    i use it
    perhaps control on view grouped or not, and hide in function

    ReplyDelete
  8. I have done all as suggested and it works great.....for me only? The buttons only appear on my screen and not on anyone else's. Is this an permissions issue or is there something else causing it?

    ReplyDelete
    Replies
    1. Should be a permission issue. Make sure All users can access the Script/Images!

      Delete
  9. Thanks for your beautiful article. it works perfectly for SharePoint 2013 List. However it is not working for SharePoint 2013 Form library. do u have any break fix for this?

    ReplyDelete
    Replies
    1. Just verified that it works on SharePoint 2013 Forms Library! Let me know what difficulty you are facing.

      Delete
  10. This works great with Standard View.
    It doesn't work on Datasheet View though.
    How do I make it work on Datasheet View?
    I am using SharePoint 2013.
    Thanks!

    ReplyDelete
    Replies
    1. Expand-collapse on Datasheet view isn't supported!

      Delete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...