Since I’ve started developing for Salesforce one thing that has always frustrated me is that the apex:pageBlockSection’s header wasn’t collapsing the section when it was clicked. In this post, I’ve provided example code that will allow you to make headers collapsible when clicked by the user.

By adding the below JavaScript, we can easily add the collapsing to the headers. Make sure to include jQuery, and to add this code to your onload function. If you aren’t sure how to include jQuery please read my article on how to include jQuery in visualforce.

//Makes apex:pageBlockSection whole header clickable instead of that little ridiculous arrow.
jQuery('.tertiaryPalette').click(function() {
var eId = jQuery(this).parent().attr('id');

if (eId != null && eId != '')
twistSection(document.getElementById(eId).childNodes[0].childNodes[0]);
}
});

//we need to readd the click event to the little arrow image; or some users may be confused.
jQuery('.tertiaryPalette img').click(function() {
var eId = jQuery(this).parent().parent().attr('id');

if (eId != null && eId != '') {
twistSection(document.getElementById(eId).childNodes[0].childNodes[0]);
}
});