SharePoint 2010: Document Library - Group By expand on item click

Expand group by clicking on the item

To expand for example group Categorie by clicking on Aankoop. We need to write a jQuery function and call that jQuery function in a Content Editor webpart on the page where the ListViewWebpart is located.

The jQuery function:
//tdClass is the class in the td where the change must be done
function ExpCollGroupOnItemClick(tdClass)
{
   //loop through each td with the class "tdClass"
   $(tdClass).each(function()
   {
      //Get the href value of the first hyperlink
      var groupbyHref = $(this).find("a:first").attr("href");
      //Get the onclick value of the first hyperlink
      var groupbyOnclick = $(this).find("a:first").attr("onclick");
      //Change the href value of the last hyperlink to href value of the first hyperlink
      $(this).find("a:last").attr("href", groupbyHref);
      //Change the onclick value of the last hyperlink to onclick value of the first hyperlink
      $(this).find("a:last").attr("onclick", groupbyOnclick);
   });
}

The javascript to call the jQuery function:
<script language="javascript" type="text/javascript">
$(document).ready(function()
{
//td.ms-gb is the class of the categorie in this case "Categorie"
ExpCollGroupOnItemClick("td.ms-gb");
//td.ms-gb2 is the class of the subcategorie in this case "Aankoop"
ExpCollGroupOnItemClick("td.ms-gb2");
});
</script>

Todo:
1. Add the jQuery function to your external javascript file that you load in your masterpage
2. Add a Content Editor webpart to the page where you want this functionality
3. Paste the javascript code to call the jQuery function without the comments into your Content Editor webpart.

Now you can click on in this case "Aankoop" to expand the group.