Show PageBlockSection Collapsed by Default

Do You Have PageBlockSections within your page? but want them to be collapsed by default? Here we go!

lets say, you have a pageblock section as shown

<apex:pageBlockSection title="Section" id="Sec1">       
    <apex:outputLabel title="Testing in progress" value="Testing" />
    <apex:commandButton action="{!save}" value="Click" />
</apex:pageBlockSection>

Then you need add <script> exactly below <apex:pageBlockSection> as shown

<script> 
	twistSection(document.getElementById('img_{!$Component.Sec1}')); 
</script>

Most importnat in above script was passing right id, Here

1. Sec1 => pageBlockSection Id
2. {!$Component.Sec1} gives you PageBlockSection Id, but you need to amend img with that because you need to reference that toggler(small left triangle where you clik on PageBlockSection), which will be like img_ + pbSectionId, which gives img_{!$Component.Sec1}

Overall Page looks goes like this

Visualforce Page

<apex:page >
    <apex:form id="fId">
        <apex:pageBlock title="Test" id="pbId">
            <apex:pageBlockSection title="Section" id="Sec1">
                <script>                   twistSection(document.getElementById('img_{!$Component.Sec1}')); 
                </script>
                <apex:pageBlockSectionItem >
                    <apex:outputLabel title="Testing in progress" value="Testing" />
                    <apex:commandButton action="{!save}" value="Click" />
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

NOTE: If you want to Collpase one or more PageBlockSections, then you need to add <script> tags under PageBlockSection which you want to collpase default.

Thank you!