Expand/collapse buttons for your Web Parts

Posted on by

The idea

The home page is a natural place to expose the content of your SharePoint site. However, often this page becomes over packed, and this affects the user experience.
One way to improve readability is to append an expand/collapse button to each Web Part. At page upload, only the main Web Parts are expanded, but the user has the option to open other Web Parts he/she is interested in.

The idea is not from me, a script for SharePoint 2003 was posted on a blog a couple years ago [Placeholder for the credits – unable to locate the original post at this time]. But this script doesn’t work on SharePoint 2007.

This week, a reader reminded me about this, and asked me if I had a solution for SharePoint 2007. So here it is! Note that I have written my script from scratch using a different method, specific to SharePoint 2007.

Warning! Don’t abuse of this: even though the content of the Web Parts is not visible, it is still loaded with the page, and too many Web Parts will impact performance.

Below an example with a calendar: usually, the week view and month view are too big for the home page. One way to deal with it is to use the minimized state by default.

Collapsed:

Expanded:

Of course, another option would be to use the technique described here.

The method

This is simply another use of the CSS display property: the display is set to “none” to hide a Web Part.

The code

Drop a CEWP anywhere on your page and bind it to this code:

<script type="text/javascript">

//
// Expand/Collapse Buttons
// Feedback and questions: Christophe@PathToSharePoint.com
//

function WPToggle(thisId, ImageId)
{
if (document.getElementById(thisId).style.display=="none")
{
document.getElementById(thisId).style.display="";
document.getElementById(ImageId).src = "/_layouts/images/minus.gif";
}
else
{
document.getElementById(thisId).style.display="none";
document.getElementById(ImageId).src = "/_layouts/images/plus.gif";
}
}

function ExpandCollapseBody()
{
var i = 1;
var WPid = "WebPartWPQ1" ;
var WPtitleid = "WebPartTitleWPQ1" ;
var Toggleid = "ToggleImage1" ;
do
{
try
{
document.getElementById(WPtitleid).innerHTML = '<IMG id="' + Toggleid + '" onClick="WPToggle(\'' + WPid + '\',\'' + Toggleid + '\')" alt="Expand/Collapse" style="margin:6px 5px 0px 2px; float:left; cursor:pointer;" src="/_layouts/images/minus.gif" />' + document.getElementById(WPtitleid).innerHTML ;
if (document.getElementById(WPid).style.display=="none")
{
document.getElementById(Toggleid).src = "/_layouts/images/plus.gif";
}
}
catch(err) {}
i = i + 1;
WPid = "WebPartWPQ" + i ;
WPtitleid = "WebPartTitleWPQ" + i;
Toggleid = "ToggleImage" + i;
} while (document.getElementById(WPid))
}

_spBodyOnLoadFunctionNames.push("ExpandCollapseBody()");
</script>

How about the default minimize/restore option?

Each Web Part comes with a customization menu in its top-right corner, including a minimize/restore option. The expand/collapse buttons have a different role:
– they can be used by readers and contributors, while the minimize/restore option is for Web designers.
– the changes are not saved; the next time the page is uploaded, the Web Parts are back to their initial state.

93 thoughts on “Expand/collapse buttons for your Web Parts”

  1. Wow! This is really useful. Another great post!
    I’m afraid I don’t know javascript – would it be possible to have the same script but one that would collapse the webparts by default (and obviously present the plus element so users can expand the webparts they want)?

    thanks,
    Greg

  2. Once again Christophe to the rescue! Great Post!

    Greg O, All you have to do is minimize all the web parts on your page while in edit mode. This will produce the result you want.

  3. Thanks 🙂

    As for your question, Greg, find these lines on the script (~line 35):
    if (document.getElementById(WPid).style.display==”none”)
    {
    document.getElementById(Toggleid).src = “/_layouts/images/plus.gif”;
    }
    and replace them with:
    document.getElementById(WPid).style.display=”none”;
    document.getElementById(Toggleid).src = “/_layouts/images/plus.gif”;

    But I agree with Robin: you can just keep the script as is and use the minimize/restore option (and do you really want to collapse all the Web Parts?)

  4. Thanks for the amended code and the minimize suggestion. Sometimes the blindingly obvious solution escape your attention.

    Thanks again,
    Greg

  5. Pingback: Links for October 31, 2008 « Steve Mullen’s Blog

  7. Great post Christophe, I always find your articles useful, I was wondering though if you have ever played with expnding and collapsing discussion board list. back in WSS 2.0 by default in threaded view you had the plus minus and could expand and collapse each message. But for wss 3.0 they removed that and now you have to show all replies. after much searching i found nothing but i wondered if you know of a way to apply this article to the dicussion board page? any insight would be very appreciated. thanks again.

  9. The main difference between the two scripts is that mine checks the default status of each Web Part (expanded or collapsed), while Ben’s collapses all Web Parts. Just a matter of taste…

  10. Is there a way to expand / collapse content within a wiki page? If so, how hard would it be to update the content if you implemented the code?

  11. You mean within the text editor? I don’t see a way to do this. Outside the text editor: you can edit the wiki page and add Web Parts, like for any other Web Part page.

  12. Yep – within the text editor. They have alot of information which they wish to present within each wiki and were looking for a way to expand / collapse content being displayed within the body of the wiki. Thanks anyway!

    PS: I saw that there were a few Table of Contents add-ons for wikis. Do you know of anyone such add-ons which are pretty stable?

  14. Pingback: A Content Editor Web Part for every home! « Path to SharePoint

  15. I have used Scriptaculous to do this and it works like a charm.

    I created an FAQ page that had the answer embedded beneath each question. When the user initially comes to the page, they see nothing but questions. When they click on a question, the rest of the page slides down enough to display the answer to the question.

    Probably easy to do with jQuery, I just happened to have the Scriptaculous script in front of me at the time.

    Hope that helps.
    Mark

  16. Thanks for the comment Mark.

    As you mention, the code could easily be rewritten with jQuery.

    However, for an application like the one I propose, plain JavaScript seems more efficient.

    I think jQuery will be interesting as a generic solution in the next version of SharePoint, where the jQuery library will be included in the page load. Today, it is still an additional script call (a light one I agree), and only justified for specific purposes like animations or effects, or if you heavily rely on it in your page.

  17. hi, thanks for the great idea. I would like to exclude one web part from being expanded/collapsed by default. How would I exclude one web part?

  18. Mike, what do you mean by this? Do you mean the initial state when the page loads? Or do you mean that for a specific Web Part you don’t wan’t to give the users the possibility to collapse it?

  20. Christophe,
    For a specific web part, by default on page load, it should not use the expand/collapse script.
    I use your script, on page load, to minimize all web parts. (the third comment above) One web part however should not by default be minimized.
    Hope I am more clearer now.
    Thanks Christophe

  21. I am exteremly new at using SPD and customizing SP07. How can this be adapted to a FAQ creation? I used Rob Wilson’s method of 2 lists for a FAQ but the Grouping in SPD does not give me the option of a second level. Ideally I would like to Expand and collapse Starting at the Category, and then reveal the answer to the right of the Question. Here is the basic layout idea. I have seen very little on Creating FAQ’s in sharepoint.

    Collapseable Category name (from article, using grouping)
    Question
    Answer (Revaled when question is clicked)
    OR
    Question Answer (Revaled when question is clicked)

    Any help would be greatly appreciated.

    Stu

  23. Follow-up on Mark Miller’s comment – I looked into jQuery to achieve the same effect, but it didn’t give a satisfying result. In particular, it turns out that the jQuery “toggle” function is buggy, there is a flickering effect in IE7.

  25. Zac: the only requirement is that you display the Web Part title. Then the script will add a plus or minus sign next to it.
    It should work for any OOTB Web Part.

  26. I have the web part title shown. The problem is that when chrome state is set to minimize the web part opens and it is a blank space. If the chrome state is normal then the web part appears and you can toggle open and close fine. However, I would like to have all of the web parts minimized on the page when it opens.

  28. Great, thanks for sharing this.
    Here is an idea or suggestion, can i use this feature and add to quick launch bar on the left? and if you dont mind tell me how that would be great.

    TIA

  29. why would you use the quick launch? i can’t understand why would put the js there.

    if you need it on every page you should place it in the master page.

  31. Hi Chris,
    yes something similar. instead of expand/collapse the complete quicklaunch bar, if i can have the same button next to each quick launch menu item, such as (from your link above) if i can have expand/collapse sign next to “Pictures”, “Documents”… this way I can expand/collapse whats inside (submenu) the Documents.

    I hope I am able to express what i was referring to 🙂

    TIA

  32. Hi Christophe,
    this yours functionality is perfect. It’s exactly what I need.
    But I have one small problem. Is possible to change your code for following:
    All WebParts are minimalized after first page load(default behaviour-it’s OK). But after expansion requested document library and sort documents by some column do not minimalize requested web part(leave webpart state – expanded).
    For now is necessary to click again to expand button.

    Please give me some advice. I’m not javascript programator.
    thanks

    Petr

  33. Hi, I do my question simple:
    Is possible to change the code agains default behaviour to:
    – the changes ARE saved; the next time the page is refreshed(by column sorting), the Web Parts REMEMBER to their initial(previous) state.
    ?
    thanks
    Petr

  34. PetrK: you would need to add a cookie to save the states. Not something easy if you are no JavaScript programmer. It could also become tricky if the site owner later makes changes to the page.

  35. Hello,

    Great Post. I am no Javascript expert. Is there a change I could make to the code to apply this to a specific Web Part (and not all web parts?)

    Thanks,

    Adam

  38. Hi, has anybody discovered solution of Zac problem(April 20, 2009 at 1:14 pm)?
    The problem is that when chrome state is set to minimize the web part opens and it is a blank space.

    I have same behaviour and I don’t know if it’s possible to solve it?

    thanks
    Petr

  40. Hi myro,
    I tried your solution but no success. I did installation of your webpart and add this webpart to page. I wrote name of my pageviewer webpart(PVWP) into Settings and clicked on OK. Sign [-] was appeared for my PVWP. (OK)
    I changed chrome style for this PVWP from Normal to Minimalized. Next I clicked on OK and sign [+] was appeared for my PVWP. (OK)
    After refresh of page I clicked on [+] sign and the PVWP was maximalized but no content of requested page was appeared. Only empty space. (PROBLEM)

    Any help?
    thanks
    Petr

  41. hello Petrk
    right now, i’m writing you from an internet caffe, because i’m on holiday in croatia.

    once i’ll get back in milan, i’ll try the wp on my pc with moss and write you back to help you out.

  43. Excellent work. I don’t have time to sit down plan and write code and this has saved me alot of hassle. Much appreciated 🙂

  45. hi,

    this is a great trick! I was searching for a solution like this…. one question (that was also asked previously by ‘mike g’ on March 4, 2009 at 2:48 pm…. is there a way to apply the expand/collapse to specific list/webpart and not all on the page?

    Thanks,
    T.C.

  46. Well done, yet another charming article from Chris, it works perfectly however I’m having some issues: 1- the plus/minus sign appears above the wp title || 2- custom wps are not getting effected neither my in house made wp nor 3rd party wp.

    Waiting for ur reply
    Thanks 🙂

  47. Hi – I’m having a problem with this code. It works fine on a test publishing page I set up and when I add it to the “live” default.aspx page it looks fine in the editing view – the [+] and [-] are all there. However, as soon as I publish the “live” page the [+] and [-] disappear. Any suggestions? I should mention that this live page has a lot of webparts on it.

      • I’m having this same problem. Everything is fine when I’m logged in to my account, but when I log in with a contributor account you can’t see the + – buttons. Could it be an issue of permissions? I’m fairly certain the web part titles are not hidden.

  48. Thanks alot for the script, it is exactly what I was looking for, Good work! Question though, it is only working for about 6 web parts and I needed it for all web parts on the page, about 15. Any idea why its not working?

  49. Hi there, thanks for this great script. It’s perfect for the job in hand.

    One quirk has popped up that I hope someone will be able to help me with.

    I am using the collapse/expand to hide Excel Web Access webparts. The script has done the job but has also hidden the spreadsheet scroll bars. Now when the spreadsheet is revealed the user can only see as much as their monitor size allows!

    Any help/solution would be greatly appreciated!

  50. A little update, it seems that if I have the spreadsheet webpart as minimized the scroll bars do not load. If it’s set to normal they do…

    • This script is awesome (and easy to use!). Been trying to figure this out for a while. Thanks very much!

  51. Is it possible to set it so that if the user clicks the title of the webpart it expands/collapses the WP, instead of using the +/- buttons?

  52. Pingback: For all SharePoint end users: an expand/collapse bookmarklet « Path to SharePoint

  53. This is awesome and just what i was looking for! I’ve been trying to find the code to expand/collapse web parts in the webpage i’m working on for a few days now, and so excited to have found this! Thank you so much!

  54. Would it be possible to allow font change or color change of the title. I am guessing that you would have to apply HTML code as string, but not even sure it would work. I am only dangerously familiar with javascript. I am guessing it would be somewhere in this portion of the code:
    document.getElementById(WPtitleid).innerHTML = ” + document.getElementById(WPtitleid).innerHTML ;
    but not sure that I see where it could be added. We do not modify the CSS or the site theme as a standing policy – so I am trying to work around that if at all possible. This code is great and works for a site with several CEWPs. Thanks!!!

  55. Looking at the color in Hex = 0452A5 and possibly changing the font to a rounded arial. Presently it is a black times roman (think) font. Something like – color: #0452A5; font-size: small; font-weight: 700; font-family: ‘Arial Rounded MT Bold’;. We are also looking at changing the entire background color of the CEWP. Probably a shade of the Hex color above, but still playing with it. The CEWP expands against a white backdrop of the site page so wanting to emphasize the CEWP within the corporate color scheme. I can use a table structure within the CEWP and do a background color of entire table (table style=”width: 100%; background-color: #93C6FD” class=”style1″). So the background color of the Title Bar may end up requiring a change along with the font and the font color changes. Again not sure if any or all is possible and would love to see where in the code I could add these changes. THanks for your reply and help and the code of the web part!

  56. Hi Christopher. This has been very usefull. However, I have put it on my page, and in Firefox it displays perfectly, but in IE 7 & 8, the plus and minus icons are above the text as if there were two rows – icon in the first and title in the second (below).. Any suggestions on how to fix this in IE?

    thank you

    Jason

  57. SHAREPOINT 2010 :—I have been trying to find exactly the same thing for collapse and expanding of web parts just like accordion control but there is nothing.. Do u guys have something for Sp 2010

  58. Great script, thanks!! However, is there anyway we can do a sub expand/collapse button under one of the main expand/collapse button??

      • Hi Chris, what i meant is that i added a CEWP for the button script, and then subsequent CEWP for formatted text. So i have a few rows of text that i want to group them.

      • If this is just free text, then you’ll need a dedicated script for your Web Part content. But why not store your text in a SharePoint list instead (for example an announcements list)?

  59. What I would like is to be able to have a list on the page which would open only the selected value, and minimize all of the others. Like an onClick that says minimize all but this WP. Say you have six web parts and you click on the list item that represents #3, it opens and all others are minimized. Then you click on #5 and #3 closes and #5 opens. Do you have a mod to your code that will do that?

  60. Hi Chris, thanks for the awesome codes first. I encountered the similar problem as Sean. It only works for the first five parts. The rest do not work even though the title is not hidden? Can you help look into this? Thanks a lot.

  61. Thank you so much, Christophe. This is a great post. Could you please help me in adding a Expand/Collapsed ALL button on the top so that once the user click on ALL button, it will Expand/Collapsed all the web parts. Thank you in advance.

  62. This is a great tool. I have one question though. I have a SP page with multiple webparts, all but one show the +/- button and work. One does not. The one I added later. Is there anything I need to do to refresh? It shows up in Edit mode, but not in the regular view. I am the main admin and have full control permissions anywhere on the site. Does anyone have a hint for me, please?

  63. Great script! I have ben looking for somthing like this for a long time, but i would also like to add a expand/collapse all functionality to enable easy printing of all contents on the page. Do you know of a way to do this?

  64. Hi, this would be the perfect solution to what I’m trying to achieve. I have a site that uses a PublishingSite template. Would this work for that? Also, what does it mean to “bind” the code to the content editor web part? Do I copy and paste the code in to the CEWP using its source editor? Thank you for your help.

    • See other posts on my blog for more details. A good practice is to store the code in a document library, and link to it from the CEWP.
      I don’t know if this will work in your case…try it! You didn’t say which version of SharePoint you’re using.

  66. Thanks for the feedback. I haven’t advertised it, but I have actually published an updated version of this solution, for both SP 2007 and 2010. I’ll try to add the expand/collapse all button.

  67. would it be possible to create own buttons with this functionality? like an image with onclick function, to expand/collapse a fix web part?

  69. Pingback: How to: Min/Max webparts in SharePoint 2010 | Del Lakin-Smith

  70. Great post Christophe,
    Worked like a charm on my SP 2010 foundation, exactly what I was looking for.
    Thanks!

Comments are closed.