Here is what I am trying to do. We have a table which as several rows and columns. This table is placed under a pageBlockSection which is collapsed when the page is loaded using a script.

What I would like to do is have the outputPanel hidden when the pageBlockSection is collapsed and when opened the outputPanel renders. Almost like an extension of the Section but I would like to keep the section out of the as I want to include a check box which shows all the outputPanels if checked. Does anyone know of a script which will determine if the pageBlockSection is collapsed and then render the outputPanel if it is open?

Here is what i have so far inlcuded the script to collapse on page load.

<apex:page standardController="Proposal__c" showHeader="true" sidebar="false">
    <apex:variable var="formWidth" value="{!1000}"/>

    <div style="width:{!formWidth}px;">
        <apex:pageBlock id="block1" title="Proposal Development"  >
            <!-- Proposal Information Section -->
            <apex:pageBlockSection id="proposalInformation" title="Proposal Information" columns="1" collapsible="false">
                <apex:form >    
                    <table align="left" border="0" width="400">
                        <tr ><td height="20" width="150" style="font-weight:bold">Account Information</td></tr>
                        <tr>
                            <td align="right" height="20">Facility : </td>
                            <td>{!Proposal__c.Facility__c}</td>
                        </tr>
                    </table>
                </apex:form>
            </apex:pageBlockSection>

            <!-- Equipment Section ---------- -->
            <apex:pageBlockSection id="equipmentSection" title="Equipment [$ {!Proposal__c.Equipment_Subtotal__c}]" columns="1" collapsible="true">
                <apex:form >
                    <table align="left" border="1">
                        <tr><td height="20" style="font-weight:bold">Quantity</td></tr>
                        <tr><td width="{!varQuality}px"><apex:inputField styleClass="Quality" value="{!Proposal__c.Qty_Admin_Fee_1__c}"/></td></tr>
                        <tr><td width="{!varQuality}px"><apex:inputField styleClass="Quality" value="{!Proposal__c.Qty_Admin_Fee_1__c}"/></td></tr>
                    </table>
                </apex:form>
            </apex:pageBlockSection>
            <script>twistSection(document.getElementById('{!$Component.block1.equipmentSection}').getElementsByTagName('img')[0])</script>

            <div>
                <apex:outputPanel id="equipmentPanel" layout="columns">
                    <apex:form >
                        <table align="right" border="0">
                            <tr>
                                <td width="200" style="font-weight:bold">Equipment Subtotal</td>
                                <td width="100"><apex:outputField value="{!Proposal__c.Extended_Cost_Subtotal__c}"/></td>
                            </tr>
                        </table>
                    </apex:form>
                </apex:outputPanel>  
            </div>
        </apex:pageBlock>
        </div>
    </html>
</apex:page>

Thanks in advance!!

Attribution to: Jordan Klepper

Possible Suggestion/Solution #1

This can be easily achieved via Jquery toggle

On load of page run the jquery with toggle as hide

$( "#equipmentPanel" ).toggle( false);

and then on click of pageblocksection run a jquery script

$( "#equipmentSection" ).click(function() {
  $( "#equipmentPanel" ).toggle();
});

Please note you will have to load jquery in static resource for this to happen and make sure Id parameter of jquery selector is correct as in my case it can be pseudo as i just used to demonstrate the approach

Update:

I went ahead and coded the requirement assuming Account object

<apex:page id="page" standardController="Account" showHeader="true" sidebar="false">

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>

<apex:variable var="formWidth" value="{!1000}"/>

<div style="width:{!formWidth}px;">
    <apex:pageBlock title="Proposal Development" id="blk" >
        <!-- Proposal Information Section -->
        <apex:pageBlockSection id="proposalInformation" title="Proposal Information" columns="1" collapsible="false">
            <apex:form >    
                <table align="left" border="0" width="400">
                    <tr ><td height="20" width="150" style="font-weight:bold">Account Information</td></tr>
                    <tr>
                        <td align="right" height="20">Facility : </td>
                        <td>{!Account.Name}</td>
                    </tr>
                </table>
            </apex:form>
        </apex:pageBlockSection>

        <!-- Equipment Section ---------- -->
        <apex:pageBlockSection id="equipmentSection" title="Equipment [$ {!Account.Name}]" columns="1" collapsible="true" >
            <apex:form >
                <table align="left" border="1">
                    <tr><td height="20" style="font-weight:bold">Quantity</td></tr>
                    <tr><td width="{!formWidth}px"><apex:inputField styleClass="Quality" value="{!Account.ID}"/></td></tr>
                    <tr><td width="{!formWidth}px"><apex:inputField styleClass="Quality" value="{!Account.ID}"/></td></tr>
                </table>
            </apex:form>
        </apex:pageBlockSection>

         <script>
         twistSection(document.getElementById('{!$Component.page.blk.equipmentSection}').getElementsByTagName('img')[0]);
         </script>

        <div id="bks">
            <apex:outputPanel id="equipmentPanel" layout="columns" >
                <apex:form >
                    <table align="right" border="0">
                        <tr>
                            <td width="200" style="font-weight:bold">Equipment Subtotal</td>
                            <td width="100"><apex:outputField value="{!Account.Name}"/></td>
                        </tr>
                    </table>
                </apex:form>
            </apex:outputPanel>  
        </div>
    </apex:pageBlock>
    </div>

    <script>

  $( document ).ready(function() {
      $( "#bks" ).toggle(false);
   });
  </script> 

 <script>
   $("img").click(function(){ 
     $( "#bks" ).toggle();
    });

Attribution to: Mohith Shrivastava
This content is remixed from stackoverflow or stackexchange. Please visit https://salesforce.stackexchange.com/questions/34211