The following example shows how you can set the open duration for a Flex Accordion container by setting the openDuration style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/07/setting-the-open-duration-for-an-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function init():void {
slider.value = accordion.getStyle("openDuration");
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="openDuration:"
direction="horizontal">
<mx:HSlider id="slider"
minimum="0"
maximum="3000"
liveDragging="true"
snapInterval="100"
tickInterval="500"
dataTipPrecision="0" />
<mx:Label text="{slider.value} ms" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Accordion id="accordion"
openDuration="{slider.value}"
creationPolicy="all"
width="100%"
height="100%"
initialize="init();">
<mx:VBox label="Red"
backgroundColor="red"
width="100%"
height="100%" />
<mx:VBox label="Orange"
backgroundColor="haloOrange"
width="100%"
height="100%" />
<mx:VBox label="Yellow"
backgroundColor="yellow"
width="100%"
height="100%" />
<mx:VBox label="Green"
backgroundColor="haloGreen"
width="100%"
height="100%" />
<mx:VBox label="Blue"
backgroundColor="haloBlue"
width="100%"
height="100%" />
</mx:Accordion>
</mx:Application>
View source is enabled in the following example.
You can also set the openDuration style in an external .CSS file or <mx:Style /> block, as seen in the following snippet:
<mx:Style>
Accordion {
openDuration: 800;
}
</mx:Style>
Or, you could set the openDuration style using ActionScript, as seen in the following snippet:
accordion.setStyle("openDuration", 800);
Finally, due to popular demand, here is the “same” example in ActionScript format:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/07/setting-the-open-duration-for-an-accordion-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:comps="comps.*"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<comps:MyBox width="100%" height="100%" />
</mx:Application>
package comps {
import mx.containers.Accordion;
import mx.containers.ApplicationControlBar;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.containers.FormItemDirection;
import mx.containers.VBox;
import mx.controls.HSlider;
import mx.controls.Label;
import mx.core.Application;
import mx.core.ContainerCreationPolicy;
import mx.events.SliderEvent;
public class MyBox extends VBox {
public var appControlBar:ApplicationControlBar;
public var slider:HSlider;
public var lbl:Label;
public var accordion:Accordion;
public var vBox1:VBox;
public var vBox2:VBox;
public var vBox3:VBox;
public var vBox4:VBox;
public var vBox5:VBox;
public function MyBox() {
super();
init();
}
private function init():void {
vBox1 = new VBox();
vBox1.label = "Red";
vBox1.setStyle("backgroundColor", "red");
vBox1.percentWidth = 100;
vBox1.percentHeight = 100;
vBox2 = new VBox();
vBox2.label = "Orange";
vBox2.setStyle("backgroundColor", "haloOrange");
vBox2.percentWidth = 100;
vBox2.percentHeight = 100;
vBox3 = new VBox();
vBox3.label = "Yellow";
vBox3.setStyle("backgroundColor", "yellow");
vBox3.percentWidth = 100;
vBox3.percentHeight = 100;
vBox4 = new VBox();
vBox4.label = "Green";
vBox4.setStyle("backgroundColor", "haloGreen");
vBox4.percentWidth = 100;
vBox4.percentHeight = 100;
vBox5 = new VBox();
vBox5.label = "Blue";
vBox5.setStyle("backgroundColor", "haloBlue");
vBox5.percentWidth = 100;
vBox5.percentHeight = 100;
accordion = new Accordion();
accordion.creationPolicy = ContainerCreationPolicy.ALL;
accordion.percentWidth = 100;
accordion.percentHeight = 100;
accordion.addChild(vBox1);
accordion.addChild(vBox2);
accordion.addChild(vBox3);
accordion.addChild(vBox4);
accordion.addChild(vBox5);
addChild(accordion);
slider = new HSlider();
slider.minimum = 0;
slider.maximum = 3000; // 3 seconds
slider.value = accordion.getStyle("openDuration");
slider.liveDragging = true;
slider.snapInterval = 100;
slider.tickInterval = 500;
slider.setStyle("dataTipPrecision", 0);
slider.addEventListener(SliderEvent.CHANGE, slider_change);
lbl = new Label();
var formItem:FormItem = new FormItem();
formItem.label = "openDuration:";
formItem.direction = FormItemDirection.HORIZONTAL;
formItem.addChild(slider);
formItem.addChild(lbl);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem);
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
/* Add docked ApplicationControlBar container to main application container. */
Application.application.addChildAt(appControlBar, 0);
}
private function slider_change(evt:SliderEvent):void {
accordion.setStyle("openDuration", evt.value);
lbl.text = evt.value.toString();
}
}
}
View source is enabled in the following example.

{ 2 comments… read them below or add one }
How do you get your code to format in the pre or code tag?
Joshua Weatherspoon,
I just use the <pre> tag. The Redoable Wordpress template has a bunch of default styles for things like code blocks, notes, alerts, downlod links, information icons, etc. For more information, see http://deanjrobinson.com/projects/redoable/.
Peter