Recipes by Category

App Distribution (2) Bundle logic, interface and services for distribution. App Logic (37) The Apex programming language, workflow and formulas for logic. Collaboration (6) The Salesforce Chatter collaboration platform. Database (29) Data persistence, reporting and analytics. Integration (33) Web Service APIs and toolkits for integration. Security (9) Platform, application and data security. Tools (4) Force.com tooling User Interface (36) Visualforce MVC and metadata-drive user interfaces. Web Sites (12) Public web sites and apps with optional user registration and login.
Beta Feedback
Cookbook Home » Show a PageBlockSection Collapsed by Default

Show a PageBlockSection Collapsed by Default

Post by Richard Boyd  (2010-10-18)

Status: Unverified
Level: intermediate

Problem

You want to use PageBlockSections within your page, but want them to be collapsed by default. This recipe shows you how to use jQuery and standard pageBlock sections to render a page with a pageBlockSection already collapsed.

Solution

You need to set up a reference to a jQuery library use a CDN, or use a static resource file. You could achieve this affect using standard Javascript if you wish, however jQuery provides a few more options.

You need this on your Visualforce page. This instantiates the jQuery library, and creates a function that hides an item tagged with the style "pnl_details", and a function that toggles between collapse and uncollapse:

:
<script type="text/javascript"  src="{!URLFOR($Resource.jQuery, '/jQuery/js/jquery-1.4.2.min.js')}"></script>

<script type="text/javascript">
	
jQuery.noConflict();
    
    jQuery(document).ready(function($) {
        
        $("#pnl_details").hide();
 
        $('#viewDetails').click(function () {
            if ($("#pnl_details").is(":hidden")) {
                $("#pnl_details").slideDown("slow");
                $("#viewDetails").html("Show Less Details");
                 return false;
            } else {
                $("#pnl_details").hide("slow");
                $("#viewDetails").html("Show More Details");
             return false;
            }
            });         
    });
</script>
The rest of the Visualforce page will contain your pageBlock. For example:
<!-- Note the {!detailLink} place holder in the title this appears as a link -->
<apex:pageBlock id="viewPatientDetails" title="My Collapsed PageBlock {!detailLink}">
<!--Use a Standard Div not an apex outputpanel simplifies selection process for jQuery no need for !$Component to get the element id-->	
<div id="pnl_details">
<apex:pageBlockSection >

<!-- Your Visualforce markup goes here... -->

</apex:pageBlockSection>
</div>
</apex:pageBlock>
This uses a controller (or extension) to show the output link. It's a little ugly.
public class CollapsiblePageBlockController {

 public string getDetailLink(){
   	 string link;

   	 //the id corresponds to the selector in the jQuery
   	 link = '<a id="viewDetails" style="color:red; font-size: 10px;" href="#">Show More Details</a>';
   
   	return link;		
   }


}

You could place the link directly in the title attribute of the pageBlock but then you'd have to escape the characters. When you render the page the PageBlockSection is collapsed when you click the link it appears with the details you want, click again and it hides.

Share

Recipe Activity - Please Log in to write a comment

You can actually use the twistAllSections(); to collapse all sections (From javascript). That way 1) you don't need to use jquery 2) you don't have to iterate through DOM elements. 

by mpetrillo03192012  (2012-09-17)

A simple solution, that collapses the specified section. Nothing more nothing less...

<apex:pageBlockSection title="Insurance coveres" id="section1">
            <script>twistSection(document.getElementById("{!$Component.section1}").childNodes[0].childNodes[0]); </script>
           
             Section content......

</apex:pageBlockSection>

by Ronni Sørensen  (2012-06-20)

Another Solution:


<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
 
$(document).ready(function ()
 {
       collapse();
 });
            
 function collapse()
 {
       elements = $('.hideListButton');
            
        elements.each(function()
         {
                  twistSection(this);
          });
}
</script>

by Sebastian Braun  (2012-05-29)

Great! post, 

I suggest that you move the detail link out of the pageblock and use

<apex:outputtext value="{!detailLink}" id="theLink" escape="false"/>

Good luck.

Chris O Davies

by Christopher O Davies  (2012-01-31)

I love the idea of this code, but the link code in the pageBlock doesn't work.  getDetailLink() doesn't return HTML like you think, it's encoded.
If I move the link inside the pageBlock code, then it works as expected, but the UI effect isn't the same.  

If anyone has any ideas how to make the title a clickable link, that would be greatly appreciated!

Thanks!

by desiree.leslie06272011  (2011-07-21)

X

Vote to Verify a Recipe

Verifying a recipe is a way to give feedback to others and broaden your own understanding of the capabilities on Force.com. When you verify a recipe, please make sure the code runs, and the functionality solves the articulated problem as expected.

Please make sure:
  • All the necessary pieces are mentioned
  • You have tested the recipe in practice
  • Have sent any suggestions for improvements to the author

Please Log in to verify a recipe

You have voted to verify this recipe.