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 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
Expaned document library:
expand collapse sharepoint 2013 webpart
Expand Collapse SharePoint Web Parts using jQuery Expand Collapse SharePoint Web Parts using jQuery Reviewed by Salaudeen Rajack on October 19, 2014 Rating: 5

8 comments:

  1. Thank you so much for your code. I've been searching and testing for hours !

    ReplyDelete
  2. 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.

    ReplyDelete
    Replies
    1. 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.

      Delete
    2. 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?

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

    ReplyDelete
    Replies
    1. 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!

      Delete
  4. 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?

    ReplyDelete
  5. 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.

    ReplyDelete

Please Login and comment to get your questions answered!

Powered by Blogger.