1

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>
Improve this question
1
  • 2
    Using the Salesforce JavaScript function twistSection() is against best practices as it could change, and break, in future platform releases.
    – Mark Pond
    Aug 13, 2015 at 0:37

1 Answer 1

Reset to default
6

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

Improve this answer
7
  • 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, 2015 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, 2015 at 0:34
  • 2
    @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, 2015 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, 2015 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, 2015 at 17:06

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .