MOSS 2007 Expand/Collapse web part with jscript

If you’ve ever wanted to give your users the ability to expand one web part at a time with a simple click in MOSS 2007, then this simple bit of jscript will do the trick. Simply create a new content editor webpart somewhere on the page, set its chrome to none to make it hidden, and then open up the source editor and copy and paste the code from below into there.

The code adds a +/- box on the left of the title, and initially minimises all the web parts. When maximising a web part, it minimises any other open ones, leaving a maximum of one open web part on the page.

The first example selects the web parts to control by the web part ID. You’ll have to identify them using a web developer toolbar. Please note that as web parts are added and removed, the ID’s can change. Because of this, a second version is supplied where the webparts are identified by their title.

Example 1, web part ID:

<script type="text/javascript">
// Add the Web Part ids below to have them minimised
// eg 'WP6','WPQ7'
// To discover the id, view source and look in the id tag
// of the table, eg id="WebPartTitleWPQ6"
var wpqToMin = ['WPQ1','WPQ2','WPQ3'];

// Search for included webparts, and set them all to minimised,
// together with a + image with a jscript action (onClick)
// this function only runs at page load
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"));
   if (wpqToMin.join().match(id)) {
    var strImg = "<img style='margin:6px 5px 0px 10px;cursor:hand;float:left;' ";
    strImg += "onClick='showHide(""+id+"",this)' src='/_layouts/images/plus.gif' alt='Expand/Collapse'>";
    document.getElementById("WebPart"+id).style.display = "none";
    theTDs[t].innerHTML = strImg + theTDs[t].innerHTML;
   }
  }
 }
}  

// Search for included webparts which are expanded, and minimise them.
// This function is called by showHide.
function wpMinimiser() {
 var theTDsMin = document.getElementsByTagName("TD");
 for (var tM=0;tM<theTDsMin.length;tM++) {
  var idMin = theTDsMin[tM].id;
  if (idMin.match("WebPartTitleWPQ")) {
   idMin = idMin.substr(idMin.indexOf("WPQ"));
   if (wpqToMin.join().match(idMin)) {
    if (document.getElementById("WebPart"+idMin).style.display == "") {
     document.getElementById("WebPart"+idMin).style.display = "none";
     theTDsMin[tM].innerHTML = theTDsMin[tM].innerHTML.replace("minus.gif", "plus.gif");
    }
   }
  }
 }
}  

// Run when user clicks. If expanded, minimise. If minimised, run
// wpMinimiser function, then expand webpart.
function showHide(i,o) {
 var wp = document.getElementById("WebPart"+i);
 if (wp.style.display=="") {
  wp.style.display = "none";
  o.src = "/_layouts/images/plus.gif";
 } else {
  wpMinimiser();
  wp.style.display = "";
  o.src = "/_layouts/images/minus.gif";
 }
}  

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

Example 2, web part title:

<script type="text/javascript">
// Add the Web Part titles below to have them minimised
// eg 'Potato','Onion','Carrot','Carot'
// Please note that titles with double letters need to be
// entered both in full and with duplicates removed
var wpqToMin = ['Potato','Onion','Carrot','Carot']; 

// Search for included webparts, and set them all to minimised,
// together with a + image with a jscript action (onClick)
// this function only runs at page load
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(/[nr]/,'');
   if (wpqToMin.join().match(title)) {
    var strImg = "<img style='margin:6px 5px 0px 10px;cursor:hand;float:left;' ";
    strImg += "onClick='showHide(""+id+"",this)' src='/_layouts/images/plus.gif' alt='Expand/Collapse'>";
    document.getElementById("WebPart"+id).style.display = "none";
    theTDs[t].innerHTML = strImg + theTDs[t].innerHTML;
   }
  }
 }
} 

// Search for included webparts which are expanded, and minimise them.
// This function is called by showHide.
function wpMinimiser() {
 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(/[nrm]/,'');
   var title = title.replace('n','');
   var title = title.replace(' ','');
   if (wpqToMin.join().match(title)) {
    if (document.getElementById("WebPart"+id).style.display == "") {
     document.getElementById("WebPart"+id).style.display = "none";
     theTDs[t].innerHTML = theTDs[t].innerHTML.replace("minus.gif", "plus.gif");
    }
   }
  }
 }
} 

// Run when user clicks. If expanded, minimise. If minimised, run
// wpMinimiser function, then expand webpart.
function showHide(i,o) {
 var wp = document.getElementById("WebPart"+i);
 if (wp.style.display=="") {
  wp.style.display = "none";
  o.src = "/_layouts/images/plus.gif";
 } else {
  wpMinimiser();
  wp.style.display = "";
  o.src = "/_layouts/images/minus.gif";
 }
} 

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

Leave a Reply Cancel reply