Sunday, October 19, 2014

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 2010 webpart

You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.

Check out these SharePoint products:

No comments :

Post a Comment

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...