SharePoint – JavaScript – Toggle Webparts
Problem – The need to display expand and collapse web parts by the link (that displays the title of the webpart).
Here is my solution. To complete this I used a Content Editor Web Part to change the functionality or the Title link. Here is the code to toggle the images.
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 = “WebPartWPQ20″ ;
var WPtitleid = “WebPartTitleWPQ20″ ;
var Toggleid = “ToggleImage20″ ;
do
{
try
{
document.getElementById(WPtitleid).innerHTML = ‘<IMG id=”‘ + Toggleid + ‘” onClick=”WPToggle(\” + WPid + ‘\’,\” + Toggleid + ‘\’)” alt=”Expand/Collapse” src=”/_layouts/images/minus.gif” /> <a href=”#” onClick=”WPToggle(\” + WPid + ‘\’,\” + Toggleid + ‘\’)” alt=”Expand/Collapse” style=”font-size:xx-small; font-weight:bold; color:navy;”>’ + document.getElementById(WPtitleid).title + ‘</a>’;
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 (i <= 22)
}
_spBodyOnLoadFunctionNames.push(“ExpandCollapseBody()”);
</script>
Here is the result with web parts 20 to 22 modified.
