Expand / Collapse Pageblock table columns in Visualforce

6:09 AM

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.

public class nestedqueryexample
  public List<Account> getaccsandtmember()
      List<Account> accounts = [Select Id,(Select TeamMemberRole, User.Name From Account.AccountTeamMembers), Name, BillingCountry from Account];
      return accounts;

Step 4:

Create a Visualforce Page named "nestedqueryexample". Paste the following code.

<apex:page tabstyle="Account" controller="nestedqueryexample" showheader="false">
        function switchMenu(obj,obj1,obj2) 
            var el = document.getElementById(obj);                                       
            if ( el.style.display != 'none' ) {
            el.style.display = 'none';
            else {
            el.style.display = '';
            var e2 = document.getElementById(obj1);                                       
            if ( e2.style.display != 'none' ) {
            e2.style.display = 'none';
            else {
            e2.style.display = '';
             var e3 = document.getElementById(obj2);                                       
            if ( e2.style.display != 'none' ) {
            e3.style.display = 'none';
            else {
            e3.style.display = '';

    <apex:pageblock >     
        <apex:pageblocktable value="{!accsandtmember}"  var="accdet">
            <apex:column >
                   <apex:facet name="header">                                        
                         Team Members                                                                               
                    <apex:outputpanel id="plusimage">
                          <apex:image url="{!$Resource.Plus_Image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.minusimage}','{!$Component.plusimage}')" title="Expand - Team Member's"/> 
                    <apex:outputpanel id="minusimage" style="display:none;">
                          <apex:image url="{!$Resource.Minus_image}" onclick="switchMenu('{!$Component.inlinetablesec}','{!$Component.plusimage}','{!$Component.minusimage}')" title="Collapse - Team Member's"/>
                    <apex:outputpanel id="inlinetablesec" style="display:none;">
                                                <apex:variable value="{!0}" var="rowNum"/>
                                                <apex:repeat var="count" value="{!accdet.AccountTeamMembers}">
                                                    <apex:variable var="rowNum" value="{!rowNum+1}"/>
                            <apex:outputText rendered="{!rowNum=0}">  No Team Members  </apex:outputText>
                        <apex:pageblocktable value="{!accdet.AccountTeamMembers}" var="tm" rendered="{!rowNum>0}">
                            <apex:column headerValue="Team Member">
                                   <apex:outputfield value="{!tm.User.Name}"/>
                             <apex:column headerValue="Role">
                                   <apex:outputfield value="{!tm.TeamMemberRole}"/>
            <apex:column headervalue="Account Name">
                    <apex:outputtext value="{!accdet.Name}"/>
            <apex:column headervalue="Billing Country">
                    <apex:outputtext value="{!accdet.BillingCountry}"/>

Code Explained:

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.



  1. Can you make a site that is open for public? For example, your personal Ebay site with registration in Salesforce? Can you give me a tutorial on how to do this? Thanks!


  2. Can you give me a tutorial on how to make a page with a search function in Salesforce?

  3. Hello..

    Here is an article of how to create a public site.. Click here ... You can then purchase Force.com Site User License which is cheap to authenticate logins..

    To make a custom search here is the article Click here ..

    Let me know if you have any questions..

    Thanks - Edwin

  4. good work very help full

  5. Hello,

    Will you pls tell me the structure of backend. i mean what is "AccountTeamMember", is that a different object. in this given example. pls give the breif idea for this.

  6. This is fantastic! Thanks very much for the code.

  7. THanks so much for this awesome code! I learned how to do this in Dev 501 and promptly forgot it. Link up with me on twitter so I can give you a proper shout-out to all the Force.com worthies I know!

  8. OMG!! Many thanks for this post. Works perfectly

  9. Hi,

    Can we do expand all(select all,deselect all) at a time

  10. Hey thanks really a nice post.....

  11. very much impressed..! Thanks

  12. Why do you need to reinvent the wheel? http://jqueryui.com/accordion/

  13. How can we extend this to display the child records "under" the row as opposed to in a column within it?

  14. Thank you for this code. I have some issues. I have a list of contacts on the account. The issue is that expend display the address under the list instead of the under the corresponding contact.

    Here is the code:


    First Name

    Last Name


    FSL ID





    Mailing City


    Mailing Zip



    Thank you.