Flex/Accordion: Conditionally hide a child

Question

How do I hide a child in a accordion? Using visible doesn't seem to work and enabled isn't what I'm after.

<mx:Accordion>
<mx:VBox width="100%" height="100%" label="Foo" id="viewOverview" visible="false">
...
</mx:VBox>
...
</mx:Accordion>

Answer 1

I think you can't hide it. Strange that the visible property doesn't work... Anyway, I would control the children through code and remove and insert them as needed by the app. Hiding:

function hideFoo():void {
    this.theAccordion.removeChild(this.vboxFoo);
}

You'll probably want to keep a reference to the "hidden" child so that you can add it later again.

Answer 2

This isn't an answer, just some curious things I found out while trying to find another solution to this problem:

Accordion headers have a visible property and a setActualSize method. The latter takes a height and width, and setting each to zero...

acc.getHeaderAt(0).setActualSize(0,0);

...accomplishes the same thing as setting visible = false, that is it hides the contents of the header, but does not remove its area from the accordion. I was hoping to trick the accordion into hiding the child, but no such luck...nonetheless, it might be a path to continue to try. If I get more time I will continue to explore but I'm out of bandwidth at the moment...

Answer 3

I think you might have to actually remove the accordion child itself (e.g. using the State removeChild() mechanism). If you need to preserve the object itself, just keep a reference to it in a global variable.

Cheers

Answer 4

Accordion controls always have 1 child open. By opening another child, the current one will close.

If you want to have more than 1 child open at a time or have all children closed, you can use the VStack component available at: http://weblogs.macromedia.com/pent/archives/2007/04/the_stack_compo.html

Answer 5

Works for me accordionContainer.removeChildAt(index); !!!

Answer 6

You can also create a descendant of accordion with methods like showHeader, hideHeader, isHeaderHidden that contains hash table to keep track of hidden elements similar to the one below:

public class AccordionHideHeader extends Accordion
    {
     private var _hiddenHeader:Dictionary=new Dictionary();

     public function AccordionHideHeader()
     {
      super();
     }

     public function hideHeader(header:DisplayObject):void
     {
      if (contains(header))
      {
       _hiddenHeader[header]=getChildIndex(header);
       removeChild(header);
      }


     }

     public function showHeader(header:DisplayObject):void
     {
      if (!contains(header))
      {
       addChildAt(header, _hiddenHeader[header]);
       delete _hiddenHeader[header]
      }
     }

     public function isHeaderHidden(header:DisplayObject):Boolean
 {      
  for (var key:Object in _hiddenHeader)
  {
   if (key==header)
    return true;    
  }

  return false;
 }
    }

Answer 7

<mx:Script>
 <![CDATA[


  private function hideFn():void
  {
   acc.removeChildAt(0);     
  }

  private function showFn():void
  {
   acc.addChildAt(helloBox  , 0);    
  } 

 ]]>
</mx:Script>
<mx:VBox>
<mx:Accordion id="acc" width="200" height="200"> 

 <mx:VBox id="helloBox" label="Test">

  <mx:Label text="hello"/>

 </mx:VBox>

 <mx:VBox label="Test2">

  <mx:Label text="hello again"/>

 </mx:VBox>

</mx:Accordion>

<mx:Button label="hide" click="hideFn()"/>
<mx:Button label="show" click="showFn()"/>
</mx:VBox>

Answer 8

Try this one

accrod.getHeaderAt(0).enabled=false; accrod.getHeaderAt(0).visible=false;

Answer 9

Sorry I'm not agree with removing child, because you will having problem when adding it back to its position in exact order.

Example: If you have 5 page in accordion, you remove child 1 and 3, now in any condition you want number 3 back to acordion how do you put it back? because the index is not 3 anymore (rember that 1 is removed too).

I found a good solution here. In short you make your own acordion with enalbe and disable ability where enable and disable define on the child container.

here i paste the acordion code:

/**
 * http://blog.flexexamples.com/2008/05/30/preventing-users-from-clicking-on-an-accordion-containers-header-in-flex/
 */
package comps {
    import mx.containers.accordionClasses.AccordionHeader;
    import mx.events.FlexEvent;

    public class MyAccHeader extends AccordionHeader {
        public function MyAccHeader() {
            super();
            addEventListener(FlexEvent.INITIALIZE, accordionHeader_initialize);
        }

        private function accordionHeader_initialize(evt:FlexEvent):void {
            enabled = data.enabled;
        }
    }
}

Maybe my answer not relevant anymore for you, but i hope can help someone else who face the same problem.