apex:pageBlockSectionItem collaspe or expand throws “twistSection is not defined” JavaScript exception

I have an apex:pageBlockSection defined within an apex:component. The component is used within an apex:pageBlock of a Visualforce page. It isn’t rendered when the page initially loads.

When a user presses the the arrow on the page block section a JavaScript error is thrown.

Uncaught ReferenceError: twistSection is not defined

Why is this Salesforce JavaScript function missing?

I did find the twistSection function defined on another page. It was defined in a script element of the HTML page (rather than an external script).

I guess I could copy this script definition into my component and define the missing function myself if required. My only concern is if when Salesforce updates their script mine will break.

The other backup plan is to put collapsible="false" on the pageBlockSection. Feels a bit like admitting defeat though.

Answer

<apex:page standardController="Account">
    <apex:form>
        <apex:pageBlock title="My Content" mode="edit">

            <!-- HACK: Fake pbSection to inject the twistSection JS function -->
            <apex:pageBlockSection title="Test" showHeader="true" rendered="false">
                <apex:pageBlockSectionItem >
                    <apex:outputText value="Label" />
                    <apex:outputText value="Value" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>

           <!-- Existing content -->

        </apex:pageBlock>
    </apex:form>
</apex:page>

Attribution
Source : Link , Question Author : Daniel Ballinger , Answer Author : Daniel Ballinger