Flex Accordion Menu

Accordion navigation container displays all its child containers in a series but displays only one at a time. Users can navigate from one to other just by clicking the corresponding button navigator.

Accordion navigation container displays all its child containers in a series but displays only one at a time. Users can navigate from one to other just by clicking the corresponding button navigator.

Flex Accordion navigator container

Accordion navigation container displays all its child containers in a series but displays only one at a time. Users can navigate from one to other just by clicking the corresponding button navigator. This helps the user to navigate easily from one page to the other for a large and complex form.

This component is very useful when you want the user fill large information in a little space rather than navigating the user to multiple pages. Using Flex according container, you can relieve the user to float through multiple pages and also going back if he wants to change some information in the beginning of the form. User can easily navigate to multiple page of a form just clicking the corresponding navigation button.

Example: (accordionexample.mxml)

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Accordion x="110" y="44" width="246" height="248">

<mx:VBox label="User Information" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<mx:Label text="User Name: "/>

<mx:TextInput/>

<mx:Label text="Password: "/>

<mx:TextInput displayAsPassword="true"/>

<mx:Label text="Confirm Password: "/>

<mx:TextInput displayAsPassword="true"/>

</mx:VBox>

<mx:VBox label="Contact Information" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<mx:Label text="Enter Email Id: "/>

<mx:TextInput/>

<mx:Label text="Enter Contact Number: "/>

<mx:TextInput/>

</mx:VBox>

<mx:VBox label="Company Address" width="100%" height="100%" verticalAlign="middle" horizontalAlign="center">

<mx:Label text="Enter Company Address: "/>

<mx:TextArea/>

<mx:Button label="Submit"/>

</mx:VBox>

</mx:Accordion>

</mx:Application>

This application displays the page like below. The accordion container displays all three child containers in a series but only first one is displaying.