Adding Separately Functioning Expand/Collapse Buttons to SharePoint (2013) Lists

Question

Total coding newbie. I'm wanting to add expand/collapse buttons to two different web part lists on one sharepoint page. The lists are in group view, so I want the buttons to expand or collapse the entire list that they are attached to. I was able to give each list its own set of buttons, but the buttons activate both lists on the page and not just the list they're attached to.

I've seen answers related to this (https://sharepoint.stackexchange.com/questions/25107/expand-collapse-all-grouped-items-in-views-of-a-page), but doesn't function in the way that I need. Any help would be greatly appreciated.

<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">Expand List</a>';

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

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

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

    $(document).ready(function () {
        $("#WebPartWPQ2").prepend(expandButton).prepend(collapseButton);
        $("#WebPartWPQ3").prepend(expandButton).prepend(collapseButton);
    });
</script>

dxt7281dfj dxt7281dfj · Accepted Answer · 2021-06-14T04:46:05

I was able to figure this out, though I'm sure this code can be tidied up with if statements/selectors. Here's what I came up with:

<script type="text/javascript">

    function expandAll1() {
        $("#MSOZoneCell_WebPartWPQ2").find('img[alt="expand"]').click();
    }

    function collapseAll1() {
        $("#MSOZoneCell_WebPartWPQ2").find('img[alt="collapse"]').click();
    }

    function expandAll2() {
        $("#MSOZoneCell_WebPartWPQ3").find('img[alt="expand"]').click();
    }

    function collapseAll2() {
        $("#MSOZoneCell_WebPartWPQ3").find('img[alt="collapse"]').click();
    }

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

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

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

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

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

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

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

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

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

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

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

    + '">&nbsp;<img title="collapse all groups" style="border:none;" alt="collapse all" src="/_layouts/images/collapseminus.gif">Collapse List</a>';
    $(document).ready(function () {
        $("#MSOZoneCell_WebPartWPQ2").prepend(expandButton1).prepend(collapseButton1);
        $("#MSOZoneCell_WebPartWPQ3").prepend(expandButton2).prepend(collapseButton2);
    });
</script>

Adding Separately Functioning Expand/Collapse Buttons to SharePoint (2013) Lists

1 Answers