none
Deleted RRS feed

Answers

All replies

  • Hi,                                                             

    If you want to expand and collapse web part in SharePoint 2013, there is a solution as follows:

    1. Find the classes of div tags of title and content of this web part using IE developer(F12), in my environment, they are like “ms-webpart-chrome-title” and “ms-wpContentDivSpace”.

    2. Then use the script below to expand and collapse your 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(".ms-wpContentDivSpace ").hide();
      //toggle the component with class msg_body
      jQuery(".ms-webpart-chrome-title ").click(function()
      {
        jQuery(this).next(".ms-wpContentDivSpace ").slideToggle(500);
      });
    });
    </script>
    

    3. Then when we click the title of the web part, it will expand or collapse.

    MikhailSP and CSjule provide more details in this thread:

    http://social.technet.microsoft.com/Forums/sharepoint/en-US/b474d891-f758-4d59-a0fe-ba233a1798b1/minimize-webparts-in-sharepoint-2013?forum=sharepointgeneral

    Best regards


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time.
    Thanks for helping make community forums a great place.

    Tuesday, October 15, 2013 9:10 AM
    Moderator
  • I agree with Patrick, you just have to manipulate changes in class names and ID's. In 2013, the HTML layouts are completely restructured to use div tags.  

    Tuesday, October 15, 2013 9:20 AM
  • Deleted
    Tuesday, October 15, 2013 6:37 PM
  • Hi Patrick!

    Your webpart has the same title and content names as mine so I just copied and pasted your code and it works perfect.

    The only problem I have is that on my particular page, I have two webparts and your code applies to both of them (making them collapse and expand).

    I want just one web part to collapse. How do I add its particular ID to your script?

    Regards


    • Edited by Lukas_UK Thursday, May 22, 2014 12:52 PM
    Thursday, May 22, 2014 12:51 PM
  • Do not worry, I figured it out! I did not realize that the web part ID are referenced with '#'

    In my case the code is:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    		jQuery.noConflict();
            jQuery(document).ready(function () {
      jQuery('#WebPartWPQ3').hide();
      //toggle the component with class msg_body
      jQuery('#WebPartWPQ3_ChromeTitle').click(function()
      {
        jQuery(this).next('#WebPartWPQ3').slideToggle(500);
      });
    });
    </script>

    It references the specific web part on my page: WPQ3 in this case. Thanks for the logic though!

    Thursday, May 22, 2014 1:28 PM
  • Hi Lucas,

    I've tested your code which works nicely, however I am not a developer and I can't get the code to work on 3 out of 4 webparts (as an example) 

    How do I make it collapse and expand Other web parts such as WebPartWP3 and WebPartWP4?

    Cheers

    Friday, July 25, 2014 1:41 AM
  • Hi MFogarty,

    You need to use a separate script for each web part you want to collapse. Although more laborious- I think it's easier, especially to modify later... Make sure you use "jQuery.noConflict" and "jQuery" instead of $ in your respective scripts. Good luck!

    Saturday, July 26, 2014 2:10 PM
  • Example of what Lukas_UK is saying (I just had to do this myself).

    I saved this to a .txt file in the "SiteAssets" library, then dropped a hidden content editor web part on my page, referencing this .txt file.

    <script type="text/javascript" src="</script">https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
     jQuery.noConflict();
            jQuery(document).ready(function () {
      jQuery('#WebPartWPQ1').hide();
      //toggle the component with class msg_body
      jQuery('#WebPartWPQ1_ChromeTitle').click(function()
      {
          jQuery(this).next('#WebPartWPQ1').slideToggle(500);
      });
     });
            jQuery(document).ready(function () {
      jQuery('#WebPartWPQ2').hide();
      //toggle the component with class msg_body
      jQuery('#WebPartWPQ2_ChromeTitle').click(function()
      {
          jQuery(this).next('#WebPartWPQ2').slideToggle(500);
      });
     });
            jQuery(document).ready(function () {
      jQuery('#WebPartWPQ3').hide();
      //toggle the component with class msg_body
      jQuery('#WebPartWPQ3_ChromeTitle').click(function()
      {
          jQuery(this).next('#WebPartWPQ3').slideToggle(500);
      });
     });

    </script>


    Lindon Morris Senior Consultant OBS www.obs.com.au

    Monday, October 6, 2014 12:17 AM
  • How would you add a plus minus button to the web part title I know simply clicking the title works but I have been asked to have some sort of plus minus indicator. 
    Friday, October 9, 2015 6:25 PM
  • This one worked for me in SP 2013.
    Friday, January 22, 2016 6:39 PM
  • This works great!!!..

    Can we add an icon '+' or '-' in web part title.

    Monday, July 17, 2017 7:54 AM
  • This works great!! Does anyone have any steps to add the count of the web part rows next to the header, so chrome title + () with a count inside?  This would be ideal when they are collapsed, especially when filtering the collapsed web part based on another list on the same page.

    Thanks, Zach

    Wednesday, June 26, 2019 6:46 PM