0

Is there anyway I can make my this page block section drop down, only when user click on it. Thanks

<apex:pageBlockSection title="Batch 3" collapsible="true" columns="1">
    //Stuff
</apex:pageBlockSection>

I tried using this method, it does not work,

 <script>   
   twistSection(document.getElementById('{!$Component.theForm.thePageBlock.section1}').getElementsByTagName('img')[0])
 </script>  
  • 1
    Using the Salesforce JavaScript function twistSection() is against best practices as it could change, and break, in future platform releases. – Mark Pond Aug 13 '15 at 0:37
4

Your issue is you do not have an ID on the section and thus nothing is done

This works just fine:

<apex:page showHeader="true" sidebar="true">
<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>

From the MDN Website:

Parameters

  • element is a reference to an Element object, or null if an element with the specified ID is not in the document.
  • id is a case-sensitive string representing the unique ID of the element being sought.

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

From Salesforce documentation on $Component:

Use the $Component global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure.

https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_access.htm

  • Do you have any documentation on why that fixes the issue? The documentation on collapsible simply says: "A Boolean value that specifies whether the page block section can be expanded and collapsed by a user. If true, a user can expand and collapse the section. If not specified, this value defaults to true" – Adrian Larson Aug 13 '15 at 0:05
  • 1
    The script needs an element to work on. It is set to work in the element section1 and the OP did not have an element by that ID. The documentation can be found by a search for document.getelementById it is not specific to salesforce. I assume @AdrianLarson you know this so are you asking me to add the documentation my answer? – Eric Aug 13 '15 at 0:34
  • 1
    @AdrianLarson - Also, I think that collapsible set to true means they can collapse it, but it is expanded by default. The twistSection collapses it when the page is rendered – Eric Aug 13 '15 at 0:47
  • @Eric My bad, i forgot to put section 1 on the pageBlockSection , but in my code i have it the exact way in you answer. Still not working. – Suneth Aug 13 '15 at 15:06
  • 1
    Create a new page, copy and paste my code EXACTLY. save page. It should work. If it does not then it is one of those unsupported things that works in one org and not another. I have tested it and it works properly for me. Also, if you are using IE, try NOT using IE, use firefox. Since it is Javascript IE could be causing an issue. – Eric Aug 13 '15 at 17:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.