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

Author: Brian Cline

Brian is a programmer living in Niagara Falls with ten years of development experience. He is passionate about automation, business process re-engineering, and gamification. For the last six years or so, he has been working with Salesforce and JavaScript.

Related Posts

Sharing is Caring