Hi everyone.

I am trying to implement SFDCFox's twistSection code that I have found in multiple places.

Every variation that I can find on Force.com is not working, so I suspect that I have done something terribly wrong.  Could someone please help me out ?

I have a pageBlock with multiple pageBlockSections.  I want to be able to toggle the sections open or closed onClick of the triangle img from salesforce.

Here is a small piece of my page:

<apex:page showHeader="false" sidebar="false" standardController="Opportunity" tabStyle="Opportunity" extensions="getAllRecords">
<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />

...
<apex:pageBlock id="block1" mode="detail" rendered="true"> 
 <apex:tabPanel selectedTab="FIRST TAB" id="theTabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab" width="100%"> 
  <apex:tab label="FIRST TAB" name="firstOne" labelWidth="250px" id="one"> 
   <apex:pageBlockSection id="underFive" title="Within 5 Days or Past Due.." columns="1" collapsible="true"> 
    <apex:PageBlockTable value="{!DuePastDue}" var="records" rowClasses="brightRed1,brightRed2" > 
     <!--I have multiple columns here--> 
     <apex:column value="{!records.Account_Name__c}" headerValue="Account Name" width="19%" /> </apex:pageBlockTable> 
<script> 
 twistSection(document.getElementById('{!$Component.block1.theTabPanel.one.underFive}').getElementsByTagName('img')[0]) 
</script>
     </apex:pageBlockTable> 
   </apex:pageBlockSection> 
  </apex:tab> 
 </apex:tabPanel> 
</apex:pageBlock>

 I cut almost all the extra bits for brevity.

I have also tried:

twistSection(document.getElementById('{!$Component.block1.underFive}').getElementsByTagName('img')[0])

twistSection(document.getElementById('{!$Component.underFive}').getElementsByTagName('img')[0])

twistSection(document.getElementById('{!$Component.j_id0.block1.theTabPanel.underFive}').getElementsByTagName('img')[0])

twistSection(document.getElementById('{!$Component.j_id0.block1.underFive}').getElementsByTagName('img')[0])

For all of them, when i run it, the twistSection does not work.  It does append the alt's "Hide Details" name, so I know it is recognizing the image at least.

And, finally, when I use the Firefox debugger tool, here is the id I get for my global component reference:

div id="j_id0:block1:underFive"

 What am I doing wrong?

Any suggestions would be helpful, thanks!

***** 12/27/2012 UPDATE:  when i remove the tabPanel and tab tags from the VF page, the twistSection works fine.
  So how do I keep the <apex:tab> and <apex:tabPanel> portions of the page AND use the twistSection?