| | Stumble It! | Add to Mixx! | | diigo it | | Slashdot |

Wednesday, August 12, 2009

SharePoint - Expand or Collapse Web Parts v 2.0

Last November I posted some code that made it possible to expand or collapse various web parts on a SharePoint page using a little plus/minus icon. Cecilie reported some problems with that code so I decided to re-write it.

As usual, you'll need to put this code into a Content Editor Web Part at the bottom of the page.

Here's the result of that re-write:
<script type="text/javascript">
// Add the Web Part Titles here to have them opened by default
var wpsToSkip = ['Tasks','sandbox'];

function wpExpander() {
var theTDs = document.getElementsByTagName("TD");
for (var t=0;t<theTDs.length;t++) {
var id = theTDs[t].id;
if (id.match("WebPartTitleWPQ")) {
id = id.substr(id.indexOf("WPQ"));
var title = (theTDs[t].innerText || theTDs[t].textContent).replace(/[\n\r]/,'');
var strImg = "<img style='margin:6px 5px 0px 2px;cursor:hand;float:left;' ";
if (wpsToSkip.join().match(title)) {
strImg += "onClick='showHide(\""+id+"\",this)' src='/_layouts/images/minus.gif'>";
} else {
strImg += "onClick='showHide(\""+id+"\",this)' src='/_layouts/images/plus.gif'>";
document.getElementById("WebPart"+id).style.display = "none";
}
theTDs[t].innerHTML = strImg + theTDs[t].innerHTML;
}
}
}

function showHide(i,o) {
var wp = document.getElementById("WebPart"+i);
wp.style.display = (wp.style.display=="") ? "none" : "";
o.src = (o.src.match(/plus.gif/)) ? "/_layouts/images/minus.gif" : "/_layouts/images/plus.gif";
}

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

13 comments:

mboone9 said...

Ben,
Thank you for the code.
Is there a way default-open some web parts and default-close others?
In other words, is there default-open code I could insert before/after some web parts and default-close code I could insert before after other web parts?
Thanks,
Mark

Architectural Hand Railing said...

I see the great code you wrote, but do you have an example of the relating HTML for this?

And will it work with 3 sections, where you click on one, and just that one section opens?

Then click on another section, and if one is open, it closes, and the new section opens?

Thank you

Ben said...

Hi mboone9 & AHR,

Funny that you two should post on this article as I was just yesterday updating this code. I trimmed it down a bit, made it a bit more efficient & added a a feature that lets you have some Web Parts open by default.

I've posted the updated code in the article above so you can just grab the new code from there.

You can specify which Web Parts you want to have opened by default by adding their name to the "wpsToSkip" array. In the code I posted, I have two Web Parts ("Tasks" and "sandbox") that will be left open, but still with the option to close them.

AHR,

To use this code, all you have to do is add it to a Content Editor Web Part anywhere on the page. The code will minimize every web part on the page that has a title bar unless you add the title to the "wpsToSkip" array. If you click the "+/-" sign next to the title, only that Web Part will open or close.

As for clicking on one Web Part and having the others close, stay tuned for an upcoming post that I think will better address this request.

-Ben

Lindaci said...

Hello! Would love to see a post on "clicking on one Web Part and having the others close" that you mentioned... I'm currently looking for exactly that functionality (in SP2010).

fmcm said...

I would like to both remove the +/- and automatically control the open close in much the same way as Lindaci was describing.

I have a dashboard that displays metrics, and I want to be able to have the list in the webpart on the top of the page execute the script to open the metric whose link was clicked and minimize the other web parts, and then repeat the process for any other link clicked.

Maria Rudakova said...

It worked perfectly well. Thank you so much! :-)

Singh Nitesh said...

thanks It works perfectly

yogesh badgujar said...

Thanks for the code. But this code doesn't work in my case. Calendar web part on exapnd don't show data properly. Instead if you open same web part in other page it shows proper data. And second thing, excluding some web parts based on title is also not working in my case. Can't we give only part of title to match?

Claudia E. Mulder said...

Thanks for the code, it works great! Just wondered if there's a way to expand the script so, next to clicking on the plus or minus signs, people can also click on the titles to expand/collapse the web parts?
Thanks! Claudia

tschino said...

This is really great. Would it be possible to use the webpart title as toggle button for expanding/collapsing the webpart instead of it directing to the actual list.
Thanks

Tracy Drew said...

Hi,
Thank for the code I've been trying for weeks to get this working, your code provided that for me. THANK YOU!!!

Just a question, is there a way to collapse those web part that don't contain data and expand those that do have data when the page is loaded?

I saw a place in the code to put the name of webparts to be skipped. How could I check for data, if it's NOT null then put name in skip area.

Thanks again for the code, appreciate it.

LynetteJ68 said...

Hi and thanks for the code! This seems simple to use but it's not working for me. I'm using SharePoint 2010. Am I supposed to add the code to the HTML for the Content Editor web part? Or directly into the content area of the web part? I've tried both ways and neither had any affect on the web parts. I did make the Content Editor the last web part on the page and it still didn't do anything. What am I doing wrong? Thanks!

mala said...

Looking to use this script but expanded with

//Add multiple Web parts to be ignored - no open/close icon, just default open

var wpsToIgnore = ['Some_WP-Title'];


Appreciate if you can help