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="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

2 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

Please Login and comment to get your questions answered!

Powered by Blogger.