Form - Expand/Collapse sections to simulate website, is this possible?

Content
1

Hello,

My FLA file is based in CS5 with AS3. I posted this in the AS3 forum but if it can be done without AS3 then I am open to that possibility as well.

I am creating a non-functioning form, meaning I just need it to look like a form but the functionality doesn’t need to work. Atleast not in this stage of development.

The functionality I need basically looks like the following:

Where:

  1. Clicking the arrow expands a section.

  2. The arrow changes to a different arrow when the section is expanded.

  3. It will be inside of a white box, the white box needs to resize to either shrink or get taller when a section is expanded or collapsed.

One section will be checkboxes, and one section will be radio buttons.

Thank you very much in advance :). I look forward to exploring into how to accomplish such a thing.

2

I managed to create partial functionality to hide/view the checkboxes using the actionscript method here:

Now I just need to figure out, if all 2 sections are collapsed… how to push the 2nd section down when I expand the 1st section. This doesn’t need to be animated. I would also need to 2nd section to go back to the correct position if I collapsed the 1st section again.

Thank you in advance for anyone who replies.

3

Okay,

I know I may be going at this completely wrong but posting my code here so someone can give me feedback so far and point me in directions where I need improvement.

So far this code:

  1. Expands/Collapses the 1st section, and properly moves the 2nd section to the correct position.

My problem so far is:

  1. The contents of the 2nd section doesn’t update to the correct position when section 1 expands/collapses.
import fl.controls.CheckBox;
import fl.controls.RadioButton;

//Set Variable for collapse position
var collapsePosition:int = 0;

// Tab1 Group 1
var tab1_gp1_main:CheckBox = new CheckBox();
var tab1_gp1_op1:CheckBox = new CheckBox();
var tab1_gp1_op2:CheckBox = new CheckBox();

addChild(tab1_gp1_main);
tab1_gp1_main.move(-110, -300);
tab1_gp1_main.width = 120;
tab1_gp1_main.label = "Landscape";

// Tab1 Group 2;
var tab1_gp2_main:CheckBox = new CheckBox();
var tab1_gp2_op1:CheckBox = new CheckBox();
var tab1_gp2_op2:CheckBox = new CheckBox();

addChild(tab1_gp2_main);
tab1_gp2_main.move(-110, 20 + tab1_gp1_main.y );
tab1_gp2_main.width = 120;
tab1_gp2_main.label = "Performance";

// Section Click Listeners
tab1_gp1_main.addEventListener(MouseEvent.CLICK, sectionHandler);
tab1_gp2_main.addEventListener(MouseEvent.CLICK, sectionHandler);


function sectionHandler(event:MouseEvent):void
{
    switch (event.currentTarget)
    {
        case tab1_gp1_main :
            switch (tab1_gp1_main.selected)
            {
                case true :
                    addChild(tab1_gp1_op1);
                    addChild(tab1_gp1_op2);
                    tab1_gp1_op1.move(-100, 20 + tab1_gp1_main.y);
                    tab1_gp1_op1.width = 120;
                    tab1_gp1_op1.label = "test 1";
                    tab1_gp1_op2.move(-100, 20 + tab1_gp1_op1.y);
                    tab1_gp1_op2.width = 120;
                    tab1_gp1_op2.label = "test 2";
                    collapsePosition = tab1_gp2_main.y;
                    tab1_gp2_main.move(-110, 20 + tab1_gp1_op2.y);

                    break;
                case false :
                    removeChild(tab1_gp1_op1);
                    removeChild(tab1_gp1_op2);
                    tab1_gp2_main.move(-110, collapsePosition);

                    break;
                default :
                    trace('Something is wrong');
            }
            break;

        case tab1_gp2_main :
            switch (tab1_gp2_main.selected)
            {
                case true :
                    addChild(tab1_gp2_op1);
                    addChild(tab1_gp2_op2);
                    tab1_gp2_op1.move(-100, 20 + tab1_gp2_main.y);
                    tab1_gp2_op1.width = 120;
                    tab1_gp2_op1.label = "test 1";
                    tab1_gp2_op2.move(-100, 20 + tab1_gp2_op1.y);
                    tab1_gp2_op2.width = 120;
                    tab1_gp2_op2.label = "test 2";
                    break;
                case false :
                    removeChild(tab1_gp2_op1);
                    removeChild(tab1_gp2_op2);
                    break;
                default :
                    trace('Something is wrong');
            }
            break;
    }
}

I have the above AS code inside a movieclip timeline, not sure if this was proper or not but I was trying to keep some code away from my long AS statements on my main timeline.