function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
vikramkkvikramkk 

Pageblock section collapsible

Hi

 

I want a pageblock section to be collapsed by default at the time of page loading. I tried using solutions posted on our discussion board but none of them are working correctly. Please post the correct approach.

 

thanks

Best Answer chosen by Admin (Salesforce Developers) 
Starz26Starz26
sfdcfox wrote:

 

 

 

<apex:page >
<apex:pageBlock id="block1">
    <apex:pageBlockSection id="section1" columns="2" collapsible="true" title="Title">
        Example Area
    </apex:pageBlockSection>
<script> twistSection(document.getElementById('{!$Component.block1.section1}').getElementsByTagName('img')[0]) </script>
</apex:pageBlock>
</apex:page>

 

BEAUTIFUL - Thanks a million for this!

 

 

All Answers

kiranmutturukiranmutturu

try this

 

 

<apex:page standardcontroller="account" recordsetvar="accounts"
    showHeader="false">
    <apex:form >
        <apex:pageblock>
        <img src="/s.gif" alt="Hide Section - List of Accounts" class="hideListButton" id="imgg" name="List of Accounts" onclick="closethis();" style="cursor:pointer;" title="Hide Section - List of Accounts"/>
            <apex:outputPanel layout="block" id="op"> 
            <script>
            var opid = document.getElementById('{!$component.op}');
            opid.style.display = 'none';
            </script>
                <apex:pageblocktable value="{!accounts}" var="a">
                    <apex:column >
                        {!a.name}
                        <apex:actionSupport event="onclick" status="act" reRender="op">
                            <apex:param name="aid" value="{!a.id}" />
                        </apex:actionSupport>
                    </apex:column>
                </apex:pageblocktable>
            </apex:outputPanel>
        </apex:pageblock>
        <apex:actionStatus starttext="Loading......" id="act" />
        <apex:outputpanel id="op" title="Account Detail Page">
            <apex:detail subject="{!$CurrentPage.parameters.aid}"
                relatedlist="false" />
        </apex:outputpanel>
    </apex:form>
    <script>
    function closethis(){
        if(opid.style.display != 'inline')
            opid.style.display = 'inline';    
        else
            opid.style.display = 'none'
    }
    </script>

 
sfdcfoxsfdcfox

That's just a painful scripting experience. Here's my solution:

 

 

<apex:page >
<apex:pageBlock id="block1">
    <apex:pageBlockSection id="section1" columns="2" collapsible="true" title="Title">
        Example Area
    </apex:pageBlockSection>
    <script>
        twistSection(document.getElementById('{!$Component.block1.section1}').getElementsByTagName('img')[0])
    </script>
</apex:pageBlock>
</apex:page>

The internal library takes care of all the little details for you.

 
vikramkkvikramkk

Hi

 

This worked fantastic.But in the pageblock section I have a commandlink by clicking which a pageblocktable is displayed. But I click the link the pageblock section is getting collapsed again. Can I prevent this collapsing. It would be great if I can do that.

 

Thanks
sfdcfoxsfdcfox

You'd have to use a cookie or something to remember the state of the page. If you're using the Visualforce AJAX library, you can store the state in local variable during the onsubmit handler, then re-expand the elements that should be using the oncomplete handler.
Mats ErikssonMats Eriksson

Do you need to reference any special library to use your example sfdcfox?

 

I get "Syntax Error" when I try to save your example.

 

/Mats
sfdcfoxsfdcfox

It's window.twistSection, located in /jslibrary/<timestamp>/main.js. If you're doing this in Visualforce, make sure you do not disable the standard headers or the function won't be available. The example I provided is a Visualforce page that I wrote to demonstrate the function, and copied from a working example in my developer account verbatim; I wrote the code specifically for this post. As of today, it still works.
Starz26Starz26
sfdcfox wrote:

 

 

 

<apex:page >
<apex:pageBlock id="block1">
    <apex:pageBlockSection id="section1" columns="2" collapsible="true" title="Title">
        Example Area
    </apex:pageBlockSection>
<script> twistSection(document.getElementById('{!$Component.block1.section1}').getElementsByTagName('img')[0]) </script>
</apex:pageBlock>
</apex:page>

 

BEAUTIFUL - Thanks a million for this!

 

 

This was selected as the best answer
sdetweilsdetweil

to add on a request here.

 

I want to have collapsable sections for the data in my custom comments display, which displayed with OutoutField gets very large.

 

<apex:form >
 <apex:pageblock >
 <apex:pageblocktable value="{!comments}" var="a">
   <apex:pageBlockSection columns="3" title="issue" >
   <apex:pageBlockSectionItem >
                    <apex:outputtext value="Public"/>
                    <apex:outputfield value="{!a.Public__c}"/>
                    <!-- <apex:inputcheckbox value="{!a.Public__c}"/>  -->
   </apex:pageblockSectionItem>             
   <!-- apex:column headerValue="Public"><apex:inputcheckbox value="{!a.Public__c}"/></apex:column>       -->
   <apex:pageBlockSectionItem >
                    <apex:outputtext value="Created"/>
                   <!-- <apex:outputLink value="/apex/ViewCaseCommentsDetail?id={!a.id}" >{!a.createdDate}</apex:outputLink>  -->
   </apex:pageblockSectionItem>    
   <!-- <apex:column headerValue="Created"><apex:outputLink value="/apex/ViewCaseCommentsDetail?id={!a.id}" >"{!a.createdDate}"</apex:outputLink></apex:column>  -->
   <apex:pageBlockSectionItem >
                    <apex:outputtext value="Comment text"/>
                    <!-- <apex:outputField value="{!a.body__c}" />  -->
   </apex:pageblockSectionItem>    
   <!-- <apex:column headerValue="Body"><apex:outputField value="{!a.body__c}" ></apex:outputfield></apex:column>     -->
   </apex:pageBlockSection>                          
 </apex:pageblocktable>
  <!-- End Default Content REMOVE THIS -->
</apex:pageblock>
</apex:form>

 while I don't get any errors, I also don't get anything displayed.

 

if I use column of course everything displays, but then I can't use the collapsable twisty..

 

ideas?

 

we might have 100's of comments, and don't want to (always) force display the text

 

Sam
abhis_universe@yahoo.co.inabhis_universe@yahoo.co.in

Thanks It worked for me................
StenderStender
sfdcfox wrote:

That's just a painful scripting experience. Here's my solution:

 

 

<apex:page >
<apex:pageBlock id="block1">
    <apex:pageBlockSection id="section1" columns="2" collapsible="true" title="Title">
        Example Area
    </apex:pageBlockSection>
<script> twistSection(document.getElementById('{!$Component.block1.section1}').getElementsByTagName('img')[0]) </script>
</apex:pageBlock>
</apex:page>

The internal library takes care of all the little details for you.

 

 

 

How would you get this to work for pageblock sections nested in a repeat?.  Here is a boiled down version of my code.

 

               <apex:repeat value="{!categories}" var="currentCategory">
                   <apex:pageBlockSection id="categorySection" showHeader="true" title="Category:  {!currentCategory}">
                        --details, etc.--
                   </apex:pageBlockSection>                   
               </apex:repeat>

 

 

Thanks in advance for any help!

 

Jeremy Stender

 

 
An_dyAn_dy

How to make this work for visual force page with repeat class, here is my VF , i just want to make this collapsable on default

 

<apex:page controller="AutomobileDashboard" sidebar="false">

 <h1>Accounts with Related Opportunities</h1>
<apex:form >
<apex:pageBlock id="table"  >
<apex:repeat value="{!accttree}" var="a" id="table">
        <apex:pageblockSection title="{!a.Name}" columns="1" collapsible="true" id="CollapseDefault">
  <table width="100%" cellpadding ="0" cellspacing = "0">                        
 <tr>
  <th>Name</th>
  <th>Status</th>
  <th>Close Date</th>
  <th>Description</th>
  <th>Highlights</th>
  <th>Mitigation</th>
  <th>Region</th>
  <th>Amount</th>
  </tr>   
 <tr>
 <td width='5%'></td>
 <td width='5%'></td>
 <td width='5%'></td>
 <td width='30%'></td>
 <td width='20%'></td>
 <td width='20%'></td>
 <td width='5%'></td>
 <td width='5%'></td>
 </tr>
           <apex:repeat value="{!a.opps}" var="c">
            <tr>
             <td><table> <apex:outputlink value="/{!c.id}" target="_blank">
             <apex:outputtext value="{!c.Name}"/>
            </apex:outputlink></table></td>
            <td><table><apex:outputText label="" value="{!c.Status__c}" escape="false"/></table></td>
             <td><table><apex:outputText label="" value="{0,date,MM/dd/yyyy}"><apex:param value="{!c.CloseDate}" /></apex:outputText></table></td>
             <td><table><apex:outputText label="" value="{!c.Description}"/></table></td>
             <td><table><apex:outputText label="" value="{!c.Highlights__c}" style="white-space:pre-wrap;"/></table></td>
             <td><table><apex:outputText label="" value="{!c.Mitigation__c}" style="white-space:pre-wrap;"/></table></td>
             <td><table><apex:outputText label="" value="{!c.Region__c}"/></table></td>
             <td><table><apex:outputText label="" value="{0,number, ###,###,###,###}">
                         <apex:param value="{!c.Amount}"/>
                        </apex:outputText></table></td>
            </tr>
           </apex:repeat>
 </table>
 </apex:pageblockSection>
    </apex:repeat>
   </apex:pageBlock>
           </apex:form>
</apex:page>
SimrinSimrin
<apex:page >
<apex:pageBlock id="block1">
    <apex:pageBlockSection id="section1" columns="2" collapsible="true" title="Title">
        Example Area
    </apex:pageBlockSection>
    <font color="#FF0000"><script>
        twistSection(document.getElementById('{!$Component.block1.section1}').getElementsByTagName('img')[0])
    </script></font>
</apex:pageBlock>
</apex:page>
I tried this example, but my pageBlockSection are always expanded. What can be issue ?
 
Ali LakhaAli Lakha
Hi

Where would I go to  enter this code in Sales Force?

Tahnks