Highlighting the Accordion container’s currently selected header

The following example shows how you can set the Accordion container’s selectedFillColors style to highlight the currently selected header.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/27/highlighting-the-accordion-containers-currently-selected-header/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Accordion {
            selectedFillColors: haloBlue, haloBlue;
        }
    </mx:Style>

    <mx:Accordion width="400" height="120">
        <mx:VBox id="child1" label="Child 1" />
        <mx:VBox id="child2" label="Child 2" />
        <mx:VBox id="child3" label="Child 3" />
    </mx:Accordion>

</mx:Application>

View source is enabled in the following example.

The previous example was built using Flex 2.0.1 Hotfix 2. This style seems to be deprecated in Flex 3.

2 thoughts on “Highlighting the Accordion container’s currently selected header

Comments are closed.