1. Click on the Edit page Under "Site Actions".
2.Add Content Editor Web part any Zone.
3.Click on the Web part. "Click here to add content"
4.Click On "Edit Html Source" on the Ribbon.
5.Add following code.
<script type="text/javascript">
// Add the Web Part Titles here to have them opened by default
var wpsToSkip = ['Search Documents','sandbox'];
//Add multiple Web parts to skip the Collapse
//var wpsToSkip = ['Search Documents','Pending Documents','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>
6.Make this Web part as Hidden.
7.Save and Close the web part.
2.Add Content Editor Web part any Zone.
3.Click on the Web part. "Click here to add content"
4.Click On "Edit Html Source" on the Ribbon.
5.Add following code.
<script type="text/javascript">
// Add the Web Part Titles here to have them opened by default
var wpsToSkip = ['Search Documents','sandbox'];
//Add multiple Web parts to skip the Collapse
//var wpsToSkip = ['Search Documents','Pending Documents','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>
6.Make this Web part as Hidden.
7.Save and Close the web part.
This is great. Would there be any way to make the whole header be clickable instead of just a little plus box?
ReplyDeleteHi shawn,
ReplyDeletewe can do, but basically sharepoint webpart heading points to some link.you dont want that link?
Hi Suresh - really great piece of code. One question though. I see the Expand option (and it works fine) when I am in edit page mode but when i am not in edit mode there is no + button.
ReplyDeleteRunning Foundation 2010
Hi Suresh,
ReplyDeleteGreat code, but I have a stupid question (I'm a js novice). How do you move the expand/collapse symbol to the right of the title instead of having it on the left?
Collapse ribbons in .net applications
ReplyDeleteLooking to use this script but expanded with
ReplyDelete//Add multiple Web parts to be ignored - no open/close icon, just default open
var wpsToIgnore = ['Some_WP-Title'];
Appreciate if you can help
Hi,
ReplyDeleteHow can I apply this logic to a specific webpart only? As in, I would like to keep all the other webparts expanded by default except for one.
Thanks,