kwizcom banner advertisement

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=""></script>
<script type="text/javascript" >
  jQuery(document).ready(function() {

//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()

   //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');


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 1:28 PM Rating: 5

1 comment:

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


Please Login and comment to get your questions answered!

Powered by Blogger.