How to detect showListButton/hideListButton being clicked on collapsible PageBlockSection?

Question

I'll go through it in text, but here is a short video detailing my problem: video

Hi, in this sample code I have collapsible PageBlockSections which are collapsed by default. Currently, when a PageBlockSection is expanded, there is a checkbox there which controls whether the text fields are rendered or not.

Ideally, I would like the text fields to be unrendered until a PageBlockSection is expanded, and have the act of clicking the showListButton on the collapsible PageBlockSection trigger a function which will render the text fields.

However, I am having a tough time figuring out how to detect the show/hide arrow on the PageBlockSection being clicked. Here is some code where I'm just trying to send an alert when the arrow is clicked.

<apex:form >
    <apex:pageBlock>

        <apex:outputPanel id="stories">
            <apex:repeat value="{!storyMap}" var="key">
                <apex:repeat value="{!storyMap[key]}" var="story">                                      
                    <apex:pageBlockSection collapsible="true" title="{!storyHeaderMap[key]}" columns="1" id="preCollapsed">

                        <apex:outputPanel id="text" rendered="true">
                            <apex:pageBlockSectionItem>
                                <apex:outputLabel>Render Rich Text</apex:outputLabel>
                                <apex:inputCheckbox value="{!richTextRenderMap[key]}">
                                    <apex:actionSupport event="onchange" reRender="rich,text">
                                    </apex:actionSupport>
                                </apex:inputCheckbox>
                            </apex:pageBlockSectionItem>


                            <apex:pageBlockSection columns="3" rendered="{!IF(richTextRenderMap[key],true,false)}">
                                <apex:actionRegion >
                                    <p style=" font-size: 11.5px; color: rgb(75,75,75); font-weight: bold; ">
                                        User Story
                                        <apex:inputTextarea styleClass="{!key}" richText="false" value="{!story.User_Story__c}"></apex:inputTextarea>
                                    </p>
                                </apex:actionRegion>
                                <apex:actionRegion>
                                    <p style=" font-size: 11.5px; color: rgb(75,75,75); font-weight: bold; ">
                                        Acceptance Criteria
                                        <apex:inputTextarea styleClass="{!key}" richText="false" value="{!story.Acceptance_Criteria__c}"></apex:inputTextarea>
                                    </p>
                                </apex:actionRegion>
                                <apex:actionRegion>
                                    <p style=" font-size: 11.5px; color: rgb(75,75,75); font-weight: bold; ">
                                        Assumptions
                                        <apex:inputTextarea styleClass="{!key}" richText="false" value="{!story.Assumptions__c}"></apex:inputTextarea>
                                    </p>
                                </apex:actionRegion>
                            </apex:pageBlockSection>
                        </apex:outputPanel>

                        <!-- collapses story pageblocksections when they load -->
                        <script>  
                            twistSection(document.getElementById('img_{!$Component.preCollapsed}')); 
                        </script>

                        <!-- trying to detect clicking the showListButton here -->
                        <script>
                            $("img_{!$Component.preCollapsed}").click(function(){ 
                             alert('hey dawg you clicked the button');
                            });
                        </script>

                    </apex:pageBlockSection>

                </apex:repeat>
            </apex:repeat>
        </apex:outputPanel>

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

Any ideas on how to get that alert to pop up from clicking the showListButton which expands the PageBlockSection would be much appreciated. Thanks!

Answer 1

Caution

This code relies on the internal library, and so may break at any time. Use at your own risk.

Basically, you can override the default method, which will allow you to do something based on the twist happening. There's no official "event" which occurs, as it's just Vanilla JS that's running here.

Here's a proof of concept:

<apex:page>
    <apex:pageBlock>
        <apex:pageBlockSection title="Test" collapsible="true">
            Hello World
        </apex:pageBlockSection>
    </apex:pageBlock>
    <script>
    window.addEventListener('DOMContentLoaded', function() {
        var oldTwist = window.twistSection;
        window.twistSection = function() {
            alert('Detected twist');
            oldTwist.apply(this, arguments);
        }
    });
    </script>
</apex:page>