Page Block Section Collapse By Default

Hi All,

Hope may you are aware of page block section behavior on Visual Force Page. Page block section is always open by default on page. Some times we need to show all page block section collapse when page is loaded on screen. So Below is the code by which we can collapse all the page block section/specific page block section will be collapse on UI.

Defalut Collapse

<apex:page sidebar="false" >

 <!-- Included Js file for jquery -->
 <apex:includeScript value="{!URLFOR($Resource.NewBootstrap, '/bootstrap/js/jquery.min.js')}"/>
 <script>
 $(document).ready(function()
 {
 /*
 When page get load then below script will run
 and collapse all the section which are under .firstSectionClass( Element Class).
 */
 var element= $('.firstSectionClass .hideListButton');
 for(var i = 0;i<element.length;i++)
 twistSection(element[i]);

 /*
 Below script it bind with arrow icon (Icon which are being used for collapse) which are displaying on section.
 When Icon are clicked then below script will run.
 */
 $('.firstSectionClass .showListButton').bind('click',function(event){
 event.preventDefault();
 var el= $('.firstSectionClass .hideListButton');
 for(var i = 0;i<el.length;i++)
 twistSection(el[i]);
 if(el.length!=0)
 twistSection(this);

 //this --> represent currently pressed section img element. You can write any script for this element fi you want to do something on section.
 });
 });
 </script>

 <!-- The First page block section where we are showing collapsed section -->
 <apex:pageBlock title="By Default Collapsible">

    <apex:outputPanel styleClass="firstSectionClass">

       <apex:pageBlockSection collapsible="true" title="First Collapsed Section By Default">
         First Section
       </apex:pageBlockSection>

       <apex:pageBlockSection collapsible="true" title="Second Collapsed Section By Default">
          Second Section
       </apex:pageBlockSection>

    </apex:outputPanel>

 </apex:pageBlock>

 <apex:pageBlock title="Actul Section Provide by SF (Not Collapse by Default)">

   <apex:outputPanel styleClass="SecondSectionClass">

      <apex:pageBlockSection collapsible="true" title="Third UnCollapsed Section By Default">
        Third Section
      </apex:pageBlockSection>

      <apex:pageBlockSection collapsible="true" title="Fourth UnCollapsed Section By Default">
         Fourth Section
      </apex:pageBlockSection>

   </apex:outputPanel>

 </apex:pageBlock>

</apex:page>

Hope this will help you.
Thanks,
Ashlekh Gera

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s