Expand and Collapse the SharePoint Web parts

                                           

                                               Consider a SharePoint page containing more web parts. Given that a condition like  the web parts must be able to expand and collapse. Though the web parts contains minimize option, the following methods could be used that is considered as more user friendly.

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.

Change hyperlink to image in SharePoint

On a specific site page or page where you have the view

1. Click on the link in the view to follow the hyperlink ( > appears)



2. Click on “Hyperlink options


3.Click OK



4. It changes to the actual URL 




5. In the code view, the source code is now 

</xsl:when>
                            <xsl:otherwise>
              <a href="{$url}"><xsl:value-of select="$url" /><xsl:value-of select="$desc" /></a>
            </xsl:otherwise>

6.Replace the <a href="{$url}"><xsl:value-of select="$url" /><xsl:value-of select="$desc" /></a> 

with 

<a href="{$url}"><img alt=" Status" src="../SiteAssets/icons/tickmark.png" /></a>