accordion--Navigator

Describes the use of the navigator.

Create a new Mxml file named Accordion.mxml. The following is the detailed code for this file.

<?xml version= "1.0" encoding= "Utf-8"?>
<mx:application xmlns:mx= "Http://www.adobe.com/2006/mxml" layout= "vertical"
verticalalign= "Top" horizontalalign= "center" paddingtop= 0 "fontfamily=" Arial "fontsize=" Backgroun " Dgradientcolors= "[0x000000,0x323232]"
>
<mx:panel title= "Navigator Container Example" layout= "vertical" color= "0xFFFFFF" borderalpha= "1" width= "$" height= "500"
paddingtop= "2" paddingright= "ten" paddingbottom= "paddingleft=" horizontalalign= "center"
>
<mx:label width= "100%" color= "0x323232"
text= "Please select any of the buttons below to change the panel of the Navigation container"/>
<mx:hbox color= "0x323232" >
<mx:button label= "Select the first panel" click= "Accordion.selectedindex=0"/>
<mx:button label= "Select a second panel" click= "Accordion.selectedindex=1"/>
<mx:button label= "Select a third panel" click= "accordion.selectedindex=2"/>
</mx:HBox>

<mx:accordion id= "Accordion" color= "0x323232" width= "100%" height= "50%" selectedindex= "2" >
<mx:vbox label= "Click the first button" >
<mx:label text= "first panel of container"/>
</mx:VBox>
<mx:vbox label= "Click the second button" >
<mx:label text= "container second panel"/>
</mx:VBox>
<mx:vbox label= "Click the third button" >
<mx:label text= "Third panel of the container"/>
</mx:VBox>
</mx:Accordion>

<mx:label width= "100%" color= "0x323232"
text= "Accordion can not be formed horizontally (in the form of left and right navigation container), can only form a navigation container in the upper and lower forms"/>
<mx:accordion id= "haccordion" color= "0x323232" width= "100%" height= "50%" selectedindex= "2" >
<mx:hbox label= "Click the first button" >
<mx:button label= "Select the first panel" click= "Accordion.selectedindex=0"/>
<mx:button label= "Select a second panel" click= "Accordion.selectedindex=1"/>
<mx:button label= "Select a third panel" click= "accordion.selectedindex=2"/>
</mx:HBox>
<mx:hbox label= "Click the first button" >
<mx:button label= "Select the first panel" click= "Accordion.selectedindex=0"/>
<mx:button label= "Select a second panel" click= "Accordion.selectedindex=1"/>
<mx:button label= "Select a third panel" click= "accordion.selectedindex=2"/>
</mx:HBox>
</mx:Accordion>

</mx:Panel>

</mx:Application>