Collapsible list elements

When a number of records and related information are rendered as a list, a user is often presented with a large amount of data that they must scroll through in order to access the items that they are interested in. One way to improve this is to allow items to be collapsed, showing enough headline information to allow the item to be identified, but taking up the minimum amount of screen real estate.

In this recipe, we will create a Visualforce page that displays a list of account records and their associated contact records. Each account record is collapsed when the page is initially rendered, and the user may click a record to expand it and see the associated contact information.

Note

Visualforce provides collapsible behavior for the standard <apex:pageBlockSection /> component. However, this forces the content to be expanded or collapsed to be nested inside this component, which styles the content in a similar fashion to a standard Salesforce section. The solution...