A while back I posted a tip about hiding grouped by headers
in list views. These are the content separators that appear at the top of a group of list items and have a +/- image for expanding/collapsing the group, the title of the group column, a colon and the group item name, like so:
+ Tasks: Testing
Many users, like myself, don’t like to see the column title in the header – they just want it to say ‘Testing’ with the expand/collapse icon. The most effective way to hide this element is to edit the CAML for the list view as I described in the original artice (which still applies in 2007 there are just more SCHEMA.XML files to edit); however, this only works on sites created AFTER the CAML has been changed. So what to do if you’ve already created a bunch of sites and want to correct this problem?
var elements = document.getElementsByTagName("a");
for(var i=0; i<elements.length; i++)
var text = elements[i].parentNode.innerHTML;
var x = text.indexOf("</A> : ");
var y = x + 12;
var leadingText = text.substring(0, x + 4);
var trailingText = text.substring(y);
elements[i].parentNode.innerHTML = leadingText + trailingText;
if (elements[i].innerHTML.indexOf("Expand/Collapse") == -1)
elements[i].style.display = "none";
In a nutshell, this script loops through the collection of anchor tags on the page to find the ones which have the expand/collapse functionality. It then strips out the colon and hides the anchor tag with the column title. To invoke it, add it to the existing ‘onload’ function in the <body> tag of the page. Since there is likely to already be an onload event associated with each master page, you’ll need to append the RemoveGroupHeader() function, like so:
Voila! No more annoying column titles. Enjoy!