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.
Of course, another option would be to use the technique described here.
This is simply another use of the CSS display property: the display is set to “none” to hide a Web Part.
Drop a CEWP anywhere on your page and bind it to this code:
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.
Wow! This is really useful. Another great post!
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.
As for your question, Greg, find these lines on the script (~line 35):
document.getElementById(Toggleid).src = “/_layouts/images/plus.gif”;
and replace them with:
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?)
Thanks for the amended code and the minimize suggestion. Sometimes the blindingly obvious solution escape your attention.
Pingback: Links for October 31, 2008 « Steve Mullen’s Blog
Your ideas are great….keep up the great work
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.
I found your solution here after getting about 75% of my own solution put together. Some of the techniques you used were extremely useful and helped me get past the remaining 25% much quicker.
You can see it here: http://moblog-banditben.blogspot.com/2008/11/expand-or-collapse-web-parts.html
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…
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?
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.
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?
Sorry, I haven’t tested any of these add-ons…
Pingback: A Content Editor Web Part for every home! « Path to SharePoint
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.
Thanks for the comment Mark.
As you mention, the code could easily be rewritten with jQuery.
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.
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?
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?
@ Mark: to confirm my initial reply, today I came across this comment in a jQuery blog:
For jQuery fans, the post I quoted is worth a look:
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.
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)
Answer (Revaled when question is clicked)
Question Answer (Revaled when question is clicked)
Any help would be greatly appreciated.
Sorry, forgot to post the link to the Method used for the Grouping.
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.
I cannot not get this to work with a Page Viewer Web part. Any Suggestions?
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.
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.
based on your post, i have created a web part that let’s you handle this trick:
I hope it can save time to people who need’s this feature 🙂
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.
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.
cloudno9, see if this is what you’re looking for:
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 🙂
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.
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.
Great web part any idea how to make it work with some NOT OOTB web parts such as this one. http://www.amrein.com/apps/page.asp?Q=5740
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?
my web part should do that job. did you tried? the link is located @myro
– July 7, 2009 at 8:45 am
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)
More posts of this qutiyal. Not the usual c***, please
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.
thanks a lot for help. I will wait for your’s answer.
Excellent work. I don’t have time to sit down plan and write code and this has saved me alot of hassle. Much appreciated 🙂
Hi, has anybody same problem as me? (August 3, 2009 at 8:14 am PetrK) Do you have any solution?
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?
Well, yes, but you’d need to find a way to identify these Web Parts, and add the filter to the loop. A bulk customization of all Web Parts is far easier.
yeah, was thinking aong that line. thanks for the code!
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
1- this will depend on how much room you have for your WP title
2- the script works for Web Parts that follow the standard SharePoint structure.
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.
Paul, could it be that your Web Part titles are hidden in view mode?
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.
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?
Maybe because the title is hidden for the other 9?
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!
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!
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?
Sure, but I didn’t do it because in SharePoint clicking on the title has another purpose.
Pingback: For all SharePoint end users: an expand/collapse bookmarklet « Path to SharePoint
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!
Glad to help! Thanks for leaving a note Marthe.
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!!!
Cindy, that should not be too difficult. What kind of color change do you expect?
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!
Wow, that’s a lot of changes! And not related to this post actually, you’d better use a separate stylesheet. For such customizations, I’d recommend that you invest in a free DOM explorer (IE 8 developer tools, or Firebug for example).
For the record, I just published a demo (SP 2010) where I modify the CEWP background:
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?
Jason: my screenshots are on IE.
Maybe your Web Part titles ar too long and force a line break?
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
I have something, but it still needs some cleanup. I plan to publish it in a couple months.
Actually, I have already published a bookmarklet that works in SP 2010. Check it out in my SharePoint User Toolkit:
Great script, thanks!! However, is there anyway we can do a sub expand/collapse button under one of the main expand/collapse button??
Matt, what would you sub-expand? What you can do is use the grouping option on a list view, this will naturally create a second level.
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)?
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?
Tony, I have an accordion solution but it is not public. I have replied to you by e-mail.
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.
I have a more recent script, see if it helps:
Note that it is written as a bookmarklet, but the functionality is the same.
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.
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?
Move the script to the bottom, below all the other Web Parts. This should fix the issue.
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?
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.
I would also really like to see code for an expand/collapse all functionality
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.
would it be possible to create own buttons with this functionality? like an image with onclick function, to expand/collapse a fix web part?
This doesn’t seem to work for Sharepoint 2010. Can you confirm that?
Pingback: How to: Min/Max webparts in SharePoint 2010 | Del Lakin-Smith
Great post Christophe,
Worked like a charm on my SP 2010 foundation, exactly what I was looking for.
Hey it working perfectly for sharepoint 2013. Thanks