Form: Expand/Contract Sections - My Code is running wild.. need advice

I have another similar post opened, but this one is specifically for how to cleanup/optimized the code I created so far. I figured it would be better to give this it’s own post.


CS5 + AS3

Hello,

I am simply trying to mimic the collapse/expand functionality in the following link:
http://static.geewax.org/checktree/index.html

The form itself does not need to be functional.

This is my first AS3 project, and I believe I am making things too complicated and the code is just getting so crazy I keep losing myself in it. I tried making certain functions for things that are repetitive, but all my attempts fail :(.

What I was able to accomplish:

  1. Create checkboxes+labels dynamically from an array and properly position them underneath eachother.

  2. Clicking Section, causes checkboxes to appear/disappear

  3. Clicking 1st Section, automatically repositions 2nd section correctly.


My Issue,

I can not find a viable way to reposition the checkboxes that are underneath the 2nd section when the 1st section expands/collapses. I basically need these checkboxes to always be located under the 2nd section.

Attached in my fla file… if you click the 2nd section and then click the 1st section, you can see what I mean.

Here is my code:

stop();

import fl.controls.CheckBox;
import fl.controls.RadioButton;

//General Variables
var i:int;

// Tab1 Group 1
var tab1_gp1_main:CheckBox = new CheckBox();
addChild(tab1_gp1_main);
tab1_gp1_main.move(0, 20);
tab1_gp1_main.width = 120;
tab1_gp1_main.label = "Landscape";

// Tab1 Group 2;
var tab1_gp2_main:CheckBox = new CheckBox();
addChild(tab1_gp2_main);
this.tab1_gp2_main.move(0, 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);

//Declare Number of Options;
var tab1_grp1_Options:int = 4;
var tab1_gp1_op_Labels:Array = ["Test1","Test2","Test3","Test4","Test5"];

var tab1_grp2_Options:int = 4;
var tab1_gp2_op_Labels:Array = ["Test1","Test2","Test3","Test4","Test5"];

//Section Click Functions;
function sectionHandler(event:MouseEvent):void
{
    switch (event.currentTarget)
    {
        case tab1_gp1_main :
            switch (tab1_gp1_main.selected)
            {
                case true :
                    for (i=0; i<=tab1_grp1_Options; i++)
                    {
                        //Option Creation Loop
                        var tab1_gp1_op:CheckBox = new CheckBox();
                        tab1_gp1_op.name = "tab1_gp1_op" + i;
                        addChild(tab1_gp1_op);

                        //Add Properties for Options
                        tab1_gp1_op.label = tab1_gp1_op_Labels[i];
                        tab1_gp1_op.width = 120;

                        //Position 1st Option Below Main
                        if (tab1_gp1_op.name == "tab1_gp1_op0")
                        {
                            tab1_gp1_op.move(20, 20 + this.tab1_gp1_main.y);
                        }
                        else
                        {
                            //Position Options > 1st below it
                            var prevOptionNum:int = i - 1;
                            var prevOption:CheckBox = getChildByName("tab1_gp1_op" + prevOptionNum) as CheckBox;
                            tab1_gp1_op.move(20, 20 + prevOption.y);
                        }
                        //Testing
                        trace(tab1_gp1_op.name);
                        trace(tab1_gp1_op.label);
                        trace(tab1_gp1_op.y);

                    }
                    ExpandCollapse("tab1_gp1_main_selected");
                    break;
                default :
                    //Remove all options for a section
                    for (i=0; i<=tab1_grp1_Options; i++)
                    {
                        var RemoveOption:CheckBox = getChildByName("tab1_gp1_op" + i) as CheckBox;
                        trace("unselected"+RemoveOption);
                        removeChild(RemoveOption);
                    }
                    ExpandCollapse("tab1_gp1_main_unselected");
            }
            break;
        case tab1_gp2_main :
            switch (tab1_gp2_main.selected)
            {
                case true :
                    for (i=0; i<tab1_grp2_Options; i++)
                    {
                        //Option Creation Loop
                        var tab1_gp2_op:CheckBox = new CheckBox();
                        tab1_gp2_op.name = "tab1_gp2_op" + i;
                        addChild(tab1_gp2_op);

                        //Add Properties for Options
                        tab1_gp2_op.label = tab1_gp2_op_Labels[i];
                        tab1_gp2_op.width = 120;

                        //Position 1st Option Below Main
                        if (tab1_gp2_op.name == "tab1_gp2_op0")
                        {
                            tab1_gp2_op.move(20, 20 + tab1_gp2_main.y);
                        }
                        else
                        {
                            //Position Options > 1st below it
                            var tab1_gp2_op_prevnum:int = i - 1;
                            var tab1_gp2_op_prevopt:CheckBox = getChildByName("tab1_gp2_op" + tab1_gp2_op_prevnum) as CheckBox;
                            tab1_gp2_op.move(20, 20 + tab1_gp2_op_prevopt.y);
                        }
                        //Testing
                        trace(tab1_gp2_op.name);
                        trace(tab1_gp2_op.label);
                        trace(tab1_gp2_op.y);
                    }
                    break;
                default :
                    //Remove all options for a section
                    for (i=0; i<tab1_grp2_Options; i++)
                    {
                        var tab1_gp2_op_remove:CheckBox = getChildByName("tab1_gp2_op" + i) as CheckBox;
                        trace("unselected"+tab1_gp2_op_remove);
                        removeChild(tab1_gp2_op_remove);
                    }
            }
            break;
    }
}


function ExpandCollapse(SectionClicked:String):void
{
    switch (SectionClicked)
    {
        case "tab1_gp1_main_selected" :
            var lastOption:CheckBox = getChildByName("tab1_gp1_op" + tab1_grp1_Options) as CheckBox;
            tab1_gp2_main.move(0, 20 + lastOption.y);
            break;
        case "tab1_gp1_main_unselected" :
            tab1_gp2_main.move(0, 20 + tab1_gp1_main.y);
            break;
        default :
    }
}

Thank you in advance.