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” />&nbsp;<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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: