+ Start a Discussion

Alternate PageBlockSection Header style in a Repeat block.



I have a VF page that is dynamically displaying pageblockheaders in a repeat section.  I have added a java script to auto-collapse the sections, but the problem is that the outcome of 20 or so collaped page block sections in a row is eye-watering to say the least.  I think that alternating the color of the section headers might help alleviate the problem, but I am unsure how.  Here is a stripped down version of my VF page.  At the top is where I apply the style to all of the pageblocksection headers.


<apex:page Controller="CustomOpportunityProductController" >
<style> .pbSubheader{ background-color: #317992 !important; border-color: none !important; } </style>   
        <apex:sectionHeader title="{!$ObjectType.Opportunity_Product__c.label} Edit" subtitle="New {!$ObjectType.Opportunity_Product__c.label}"/>
        <apex:form >        
        <apex:pageBlock title="New {!$ObjectType.Opportunity_Product__c.label}" id="mainPageBlock">
		<apex:pageBlockSection showHeader="true" title="Details" columns="1" collapsible="false" >    
        		****Intermediate code here, not important***
		<apex:repeat value="{!categories}" var="currentCategory" rendered="{!showProductSelection}" >
       			<apex:pageBlockSection id="categorySection" showHeader="true" title="Category:  {!currentCategory}" columns="1">
                		<apex:pageBlockTable value="{!separatedPSRecords[currentCategory]}" var="currentPSWrapper" cellpadding="4" border="1" >
					***Details of the repeat table here***
			 <script> twistSection(document.getElementById('{!$Component.categorySection}').getElementsByTagName('img')[0]) </script> ***This is the script that collapses the PBS***
                	 <br/>  ***Tried adding this to alleviate the problem, with only minimal effect.                  

 Any help would be appreciated.


Jeremy Stender