0 Replies Latest reply on Mar 9, 2011 10:47 AM by Handycam

    How to use different icons for different Accordion States?

    Handycam Level 1

      I have an accordion with several navigator content components.  I know how to set the icon, but how can I use a DIFFERENT icon for selectedStates?

       

      <mx:Accordion id="sections" width="225" height="100%" borderColor="#e1e5ca">
           <s:NavigatorContent label="Benchtop Machines" width="100%" height="100%" icon="@Embed('assets/triangle_closed.png')">
                <s:List...
           </s:NavigatorContent>
      </mx:Accordion>
      

       

      I have a custom AccordionHeaderSkin, of type "The Spark skin class for the header of the Halo Accordion container. "

       

      I can easily set all my other parameters there, and then I am applying the skinClass in CSS:

       

      mx|Accordion {
           borderStyle: none;
           openDuration: 300;
           headerHeight: 32;
           selectedFillColors: #a3b2e2, #4557a2;
           backgroundColor: #ffffff;
           textRollOverColor: #000000;
           textSelectedColor: #35241a;
           headerStyleName: "myaccordionHeader";
      }
      
      .myaccordionHeader {
           color: #35241a;
           fontSize: 14;
           fontFamily: sansBoldMX;
           skin: ClassReference("skins.AccordionHeaderSkin");
      }