Flex Example :: Collapsing Panels

One of the neat things about Flex 2 is the ability to easily manipulate the UI. It is as simple as setting the width or height of a panel (or whatever container you are using). I have seen a couple examples in books that recommend setting the width and height of panel to 0 or setting the visible attribute to false. This works fine in some cases, but if you are trying to hide one panel and show another, it can throw some unexpected results.

In the example I have provided, The top two panels, when toggled, are set to hide one panel and adjust the width of the other to 100% You will notice that the panel does not widen to the entire stage.

The two panels on the bottom are toggled with the same attributes as the top panels, except I have also included the includeInLayout property and set that to match the visibility of the hidden panel. The results of toggling the panels are what you would expect them to be.

The colors in the panels are only there to make viewing the toggled panels easier.

You can view the example at:
  http://ctzconsulting.com/blog/examples/flex/collapsing-panels/index.html 

The source is also available. You can access it by right-clicking the example.