Expand Collapse SharePoint Web Parts using jQuery

Requirement: Expand Collapse SharePoint list view web parts in Home page.

Solution:

We can implement Expand collapse functionality in SharePoint 2013 using jQuery. Here is how to expand/collapse web parts in SharePoint using jQuery.

Just grab the IDS of List view web part (WebPartWPQ3) and Web part header (in my case: WebPartTitleWPQ3) using IE developer toolbar or Firebug in Firefox.

expand collapse webparts in sharepoint 2010

jQuery to provide Expand-Collapse functionality for SharePoint 2013 web parts:

Add this jQuery to the page with the Script editor web part.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
  jQuery(document).ready(function() {
  jQuery("#WebPartWPQ3").hide();

//Add Expand Icon to Web Part Header
    $('Span#WebPartTitleWPQ3').find('h2').append("<span style='padding-left:0.5em; text-decoration:none'> <img id='ExpandCollapse' src='/_layouts/images/Expand.gif'></span>");

  //toggle the component with class msg_body
  jQuery(".ms-webpart-chrome-title ").click(function()
  {
    jQuery(this).next("#WebPartWPQ3").slideToggle(400);

   //Replace Expand-Collapse Image   
   var ExpandCollIMG = $('img#ExpandCollapse').attr('src');
   if (ExpandCollIMG === '/_layouts/images/COLLAPSE.gif' ) 
    {
        $('img#ExpandCollapse').attr('src', '/_layouts/images/Expand.gif');
    }
   
   if ( ExpandCollIMG === '/_layouts/images/Expand.gif' ) 
    {
        $('img#ExpandCollapse').attr('src', '/_layouts/images/COLLAPSE.gif');
    }
  });
});
</script>

Result: You’ll get Expand-collapse buttons next to web part titles.
how to expand/collapse webparts in sharepoint using jquery
Expanded document library:
expand collapse sharepoint 2013 webpart

Salaudeen Rajack

Salaudeen Rajack - Information Technology Expert with Two-decades of hands-on experience, specializing in SharePoint, PowerShell, Microsoft 365, and related products. He has held various positions including SharePoint Architect, Administrator, Developer and consultant, has helped many organizations to implement and optimize SharePoint solutions. Known for his deep technical expertise, He's passionate about sharing the knowledge and insights to help others, through the real-world articles!

10 thoughts on “Expand Collapse SharePoint Web Parts using jQuery

  • Hello,

    i don’t understand the part : “Lastly, I changed the image ID from ExpandCollapse to ExpandCollapse4 again by sticking the webpart number on to the end of it.”
    Can you explain the changes you have made please ?

    Reply
  • This jQuery works great with SharePoint Online except for one minor issue. If you only have one web part on the page that you want to manipulate with this Expand/Collapse function, then it’s perfect. If you have two or more web parts that you are adding the +/- to … then it still works but the images change for every web part. If you are
    manipulating an even number of web parts with this expand/collapse function, the the + never changes to a – sign. If you have an odd number of weparts you are expanding/collapsing, then the + sign changes to a _ sign on every web part you are manipulating. The actual expanding and collapsing works fine. But the +/- image gif doesn’t display correctly. Here is how I solved this problem. Forgive me if I don’t use terminology correctly. I am just a novice. Here is what I changed in this script to get the +/- symbols to change properly when manipulating more than one web part.

    First of all, I had to change this generic class:

    jQuery(“.ms-webpart-chrome-title “).click(function()

    to actually call the specific web part ID

    jQuery(“#WebPartWPQ4_ChromeTitle”).click(function()

    The generic class being called applied to all the web parts and my impression was that the last +/- button change was being applied to all web parts getting called by the expand/collapse function.

    Then … I changed the variable ExpandCollIMGx to make a unique variable ExpandCollIMG4 simply by sticking the webpart number onto the end of it in four places

    Lastly, I changed the image ID from ExpandCollapse to ExpandCollapse4 again by sticking the webpart number on to the end of it.

    Before my changes, the + sign was never changing even after expanding one of the sections. Other times, the + was changing to a – but it was change for all the webparts even though I was obviously only clicking one of them.

    With the three simple changes, the +/- symbol on each webpart now functions distinctly from all the other web parts being called by this query/function.

    Reply
  • Works great, thanks for this very helpful tip! Can we move the expand to the left vs right? Also, can we show a list count to the right if collapsed, or in general? Would be helpful if you had a page with multiple web parts that are being filtered by a header list web part.

    Reply
  • Works great! Can we move the expand to the left side? Also, can we display a count for the list in the web part when collapsed?

    Reply
  • This is awesome! How do I change the code to be collapsed by default? Mine keeps expanding when I open the page.

    Reply
    • You need to swap the Expand.gif and COLLAPSE.gif references otherwise they will be the wrong way around if you do this.

      This is really useful – thanks everyone!

      Reply
  • For multiple content editor webparts on the same page, the .gif animation for expand & collapse doesn’t seem to work. Can anyone help to modify this code for adding the script to multiple webparts.

    Reply
    • It’s great, however, when I click on the web part title, the web part expands, but then it takes me back to the main list (or whatever URL is specified in the web part). Any way to stop this from happening?

      Reply
    • I have just implemented this on my site and I think the quick fix for this would be to create separate GIFs for each web part.

      Reply
  • Thank you so much for your code. I’ve been searching and testing for hours !

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *