3 Replies Latest reply on Oct 30, 2007 4:30 AM by AwesomeDigital3

    Hiding An Accordion Section

    AwesomeDigital3 Level 1
      I have an Accordion control that has 8 form controls with in it.
      I am using is for a multi-step registration page

      I would like to hide several of the forms (Accordion Sections) and the show them based upon what they select on the first form.
      I have tried the visible and enabled attributes on the form, but those only seem to apply to the contents inside the form.

      If somebody could make a suggestion or point me to an example of a variable multi-step process, I would appreciate it.

      Thanks
      Mathias

        • 1. Re: Hiding An Accordion Section
          Gregory Lafrance Level 6
          This code may help. Put the Form components in a folder components/accordionContents.

          registration.mxml

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Form xmlns:mx=" http://www.adobe.com/2006/mxml" label="Participation Selections" width="100%" height="100%">
          <mx:Script>
          <![CDATA[
          public function contentsHandler(event:Event):void{
          var targetCheckbox:CheckBox = CheckBox(event.target);
          switch(targetCheckbox.id){
          case 'classes':
          if(targetCheckbox.selected == true)
          targetCheckbox.parentApplication.regContainer.addChild(targetCheckbox.parentApplication.cl s);
          else
          targetCheckbox.parentApplication.regContainer.removeChild(targetCheckbox.parentApplication .cls);
          break;
          case 'seminars':
          if(targetCheckbox.selected == true)
          targetCheckbox.parentApplication.regContainer.addChild(targetCheckbox.parentApplication.se m);
          else
          targetCheckbox.parentApplication.regContainer.removeChild(targetCheckbox.parentApplication .sem);
          break;
          case 'labs':
          if(targetCheckbox.selected == true)
          targetCheckbox.parentApplication.regContainer.addChild(targetCheckbox.parentApplication.la b);
          else
          targetCheckbox.parentApplication.regContainer.removeChild(targetCheckbox.parentApplication .lab);
          break;
          case 'workshops':
          if(targetCheckbox.selected == true)
          targetCheckbox.parentApplication.regContainer.addChild(targetCheckbox.parentApplication.wr k);
          else
          targetCheckbox.parentApplication.regContainer.removeChild(targetCheckbox.parentApplication .wrk);
          break;
          case 'networking':
          if(targetCheckbox.selected == true)
          targetCheckbox.parentApplication.regContainer.addChild(targetCheckbox.parentApplication.ne twk);
          else
          targetCheckbox.parentApplication.regContainer.removeChild(targetCheckbox.parentApplication .netwk);
          break;
          case 'startup':
          if(targetCheckbox.selected == true)
          targetCheckbox.parentApplication.regContainer.addChild(targetCheckbox.parentApplication.sr t);
          else
          targetCheckbox.parentApplication.regContainer.removeChild(targetCheckbox.parentApplication .srt);
          break;
          case 'debriefing':
          if(targetCheckbox.selected == true)
          targetCheckbox.parentApplication.regContainer.addChild(targetCheckbox.parentApplication.de b);
          else
          targetCheckbox.parentApplication.regContainer.removeChild(targetCheckbox.parentApplication .deb);
          break;
          }
          }
          ]]>
          </mx:Script>
          <mx:HBox>
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Classes"/>
          <mx:Label text="Seminars"/>
          <mx:Label text="Labs"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="classes" change="contentsHandler(event)"/>
          <mx:CheckBox id="seminars" change="contentsHandler(event)"/>
          <mx:CheckBox id="labs" change="contentsHandler(event)"/>
          </mx:VBox>
          </mx:HBox>
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Workshops"/>
          <mx:Label text="Networking"/>
          <mx:Label text="Startup"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="workshops" change="contentsHandler(event)"/>
          <mx:CheckBox id="networking" change="contentsHandler(event)"/>
          <mx:CheckBox id="startup" change="contentsHandler(event)"/>
          </mx:VBox>
          </mx:HBox>
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Debriefing"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="debriefing" change="contentsHandler(event)"/>
          </mx:VBox>
          </mx:HBox>
          </mx:HBox>
          </mx:Form>

          classSelections.mxml
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Form xmlns:mx=" http://www.adobe.com/2006/mxml" label="Class Selections" width="100%" height="100%">
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Class1"/>
          <mx:Label text="Class2"/>
          <mx:Label text="Class3"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="class1"/>
          <mx:CheckBox id="class2"/>
          <mx:CheckBox id="class3"/>
          </mx:VBox>
          </mx:HBox>
          </mx:Form>

          debriefingSelections.mxml
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Form xmlns:mx=" http://www.adobe.com/2006/mxml" label="Debriefing Selections" width="100%" height="100%">
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Debriefing1"/>
          <mx:Label text="Debriefing2"/>
          <mx:Label text="Debriefing3"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="debriefing1"/>
          <mx:CheckBox id="debriefing2"/>
          <mx:CheckBox id="debriefing3"/>
          </mx:VBox>
          </mx:HBox>
          </mx:Form>

          labSelections.mxml
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Form xmlns:mx=" http://www.adobe.com/2006/mxml" label="Lab Selections" width="100%" height="100%">
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Lab1"/>
          <mx:Label text="Lab2"/>
          <mx:Label text="Lab3"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="lab1"/>
          <mx:CheckBox id="lab2"/>
          <mx:CheckBox id="lab3"/>
          </mx:VBox>
          </mx:HBox>
          </mx:Form>

          networkSelections.mxml
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Form xmlns:mx=" http://www.adobe.com/2006/mxml" label="Networking Selections" width="100%" height="100%">
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Networking1"/>
          <mx:Label text="Networking2"/>
          <mx:Label text="Networking3"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="networking1"/>
          <mx:CheckBox id="networking2"/>
          <mx:CheckBox id="networking3"/>
          </mx:VBox>
          </mx:HBox>
          </mx:Form>

          seminarSelections.mxml
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Form xmlns:mx=" http://www.adobe.com/2006/mxml" label="Seminar Selections" width="100%" height="100%">
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Seminar1"/>
          <mx:Label text="Seminar2"/>
          <mx:Label text="Seminar3"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="seminar1"/>
          <mx:CheckBox id="seminar"/>
          <mx:CheckBox id="seminar3"/>
          </mx:VBox>
          </mx:HBox>
          </mx:Form>

          startupSelections.mxml
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Form xmlns:mx=" http://www.adobe.com/2006/mxml" label="Startups Selections" width="100%" height="100%">
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Startup1"/>
          <mx:Label text="Startup2"/>
          <mx:Label text="Startup3"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="startup1"/>
          <mx:CheckBox id="startup2"/>
          <mx:CheckBox id="startup3"/>
          </mx:VBox>
          </mx:HBox>
          </mx:Form>

          workshopSelections.mxml
          <?xml version="1.0" encoding="utf-8"?>
          <mx:Form xmlns:mx=" http://www.adobe.com/2006/mxml" label="Workshops Selections" width="100%" height="100%">
          <mx:HBox>
          <mx:VBox>
          <mx:Label text="Workshop1"/>
          <mx:Label text="Workshop2"/>
          <mx:Label text="Workshop3"/>
          </mx:VBox>
          <mx:VBox>
          <mx:CheckBox id="workshop1"/>
          <mx:CheckBox id="workshop2"/>
          <mx:CheckBox id="workshop3"/>
          </mx:VBox>
          </mx:HBox>
          </mx:Form>

          Test.mxml (main app file)
          <?xml version="1.0"?>
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:comp="components.accordionContents.*"
          creationComplete="init()" width="100%" height="100%">
          <mx:Script>
          <![CDATA[
          import components.accordionContents.*;

          public function init():void {
          regContainer.addChild(reg);
          }

          public var reg:components.accordionContents.registration = new registration();
          public var cls:components.accordionContents.classSelections = new classSelections();
          public var sem:components.accordionContents.seminarSelections = new seminarSelections();
          public var lab:components.accordionContents.labSelections = new labSelections();
          public var wrk:components.accordionContents.workshopSelections = new workshopSelections();
          public var srt:components.accordionContents.startupSelections = new startupSelections();
          public var netwk:components.accordionContents.networkSelections = new networkSelections();
          public var deb:components.accordionContents.debriefingSelections = new debriefingSelections();
          ]]>
          </mx:Script>
          <mx:VBox width="100%" height="100%">
          <mx:Label text="Registration:" fontWeight="bold" fontSize="12"/>
          <mx:Accordion id="regContainer" width="350" height="280">
          </mx:Accordion>
          </mx:VBox>
          </mx:Application>
          • 2. Re: Hiding An Accordion Section
            ntsiii Level 3
            Also, look into using Repeater instead of manually using addChild() / removeChild()

            Tracy
            • 3. Re: Hiding An Accordion Section
              AwesomeDigital3 Level 1
              Thanks Kevin, that is one sweet example and will help me greatly!

              Also thanks to you Tracy. I will go look into the Repeater now.

              Mathias