flex4 - How to implement a Expander (Accordion of single item) in flex? -

i have flex application behaves described below

i want fix 2 things

1. i want make clear user more info can shown. current "profundidad" label.
2. the element being shown below not aligned 1 above it, since component being shown when state changes

i have tried using accordion, when have accordion single element, element visible can not collapsed , expanded

what want final result close posible this

you can achieve using states. first define 2 states: 'normal' , 'expanded'

<s:states>     <s:state name="normal"/>     <s:state name="expanded"/> </s:states> 

then use includein or excludefrom display components needed:

<!-- visible components --> <s:label text="fpbaf20f"/> <s:label text="n/a"/>  <s:button label="profundidad"            click="currentstate = currentstate == 'expanded' ? 'normal' : 'expanded'"/>  <!-- compra/venta grid shown in 'expanded' state --> <s:datagrid includein="expanded" /> 

the click handler isn't pretty, idea: when click button, state toggled 'normal' 'expanded' , when click again.
that's there it.

if prefer out-of-the-box solution, you're free use collapsiblepanel component created: https://github.com/riastar/collapsiblepanelfx ;)