0

I found multiple scripts that are relevant to the "expand/collapse" SharePoint list group; however, most are looking at the "minus/plus"sign to expand/collapse. the problem is that, when I added a list view webpart to a webpart page, the group icon shows a "triangle" not a "minus/plus"sign, even when i changed the list style to "basic table". Please kindly let me know how I can fix this?

function collapseGroups() {
$("img[src*='minus.gif']:visible").parent().click();
}
function expandGroups() {
$("img[src*='plus.gif']:visible").parent().click();
}

issue

5
  • 2
    What are you trying to achieve? - Also, if you F12 into the list view, you can work out what CSS is applied and what generates the triangles, no?
    – teylyn
    Sep 29, 2019 at 2:55
  • the issue is that when i added the list view webpart to a webpart page, the group icon shows a "triangle" not "minus/plus" sign, and the code is checking the "minus/plus" sign to expand/collapse the group. The code is working well if it is added to the list view webpart page directly(by changi n the list style to "basic table")
    – T Zhang
    Sep 29, 2019 at 3:38
  • Again, can't you identify the underlying graphic for the triangle with F12 Developer Tools? If you can see it on your screen, you can inspect it with F12.
    – teylyn
    Sep 29, 2019 at 19:53
  • <img class="ms-commentexpand-icon" id="img_21-1_" alt="expand" src="/_layouts/15/images/spcommon.png?rev=23">
    – T Zhang
    Sep 30, 2019 at 12:53
  • Well, there you go.
    – teylyn
    Sep 30, 2019 at 20:07

1 Answer 1

0

If you want to change default Expand collapse icon to plus minus icon, put script editor webpart on page and put following code into it, change js and image src accordingly.

 <script type="text/javascript" src="/sites/ABC/SiteAssets/js/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click', 'img', function(){
    if($(this).hasClass("ms-commentexpand-icon")){
        $(this).attr("src","/sites/ABC/SiteAssets/images/icons8-PLUS-50.png");
        $(".ms-commentexpand-icon").css({top: 0, left: 0});
    }else if($(this).hasClass("ms-commentcollapse-icon")){
        $(this).attr("src","/sites/ABC/SiteAssets/images/icons8-minus-50.png");
        $(".ms-commentcollapse-icon").css({top: 0, left: 0});
    }
});
});
$(window).on('load', function() {
$('.ms-commentexpand-icon').attr("src","/sites/ABC/SiteAssets/images/icons8-PLUS-50.png");
$('.ms-commentcollapse-icon').attr("src","/sites/ABC/SiteAssets/images/icons8-minus-50.png");
$(".ms-commentexpand-icon").css({top: 0, left: 0});
$(".ms-commentcollapse-icon").css({top: 0, left: 0});
});

</script>

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.