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>

<!-- 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>

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


}