How to Make the apex:pageblocksection header collapsible

Sharing is Caring

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]);
}
});
Sharing is Caring

Brian is a software architect and technology leader living in Niagara Falls with 13+ years of development experience. He is passionate about automation, business process re-engineering, and building a better tomorrow.

Brian is a proud father of four: two boys, and two girls and has been happily married to Crystal for more than ten years. From time to time, Brian may post about his faith, his family, and definitely about technology.