As a continuation to my previous post of "Displaying nested PageBlock tables", in this article i would be explaining the steps to expand/collapse your nested table. To read the previous article Click here

Why do this???

Mainly, to improve readability and user friendliness. Secondly, by doing so you better understand the power of Javascript combined with Visualforce.

Step 1:

You will need two images, one for expand and the other for collapse. Below are the two images. Right-click the images and save it to your machine.

- Upload this image into Static Resource as Plus_Image

- Upload this image into Static Resource as Minus_Image

Step 2:

Upload these files into Static Resource.

Step 3:

Create an Apex Class named "nestedqueryexample". Paste the following code.

In this example, we have used a Javascript function named "switchMenu". In our visualforce Page, we have placed the nested pageblocktable, the expand image and the collapse image into three apex:outputpanel's.

When the expand or collapse image is clicked when call the Javascript function which displays the necessary outputpanel's and hides the ones that are not required.

If you note carefully, we have passed parameters to the javascript function using $Component variable. Components inside a table or repeat tag are preappended with an integer value to identify them uniquely.

For example, our nested pageblocktable has an id "inlinetablesec". So, for the first row the id of this table would be 0:inlinetablesec and for the next 1:inlinetablesec and so on. This is done automatically by Salesforce, and we make use of this in our javascript function to display/hide the respective tables.

Hope this article helps you in some way. Write to me in case you have any difficulties.