5 Replies Latest reply on Jan 25, 2007 11:06 AM by ur_dtrain

    Repeater and Accordion

    Level 7

      I am interested in creating a dynamic accordion based on XML data, such as
      is shown here


      Unfortunately, the provided link to the source code at the bottom of the
      page is broken.

      Can anyone help me out? Basically I have a data list like this

      MENU A

      so I want an accordion tab for Menu A and Menu B and then the SUB's as
      buttons inside the appropriate accordion.



        • 1. Re: Repeater and Accordion
          ntsiii Level 3
          Well, I am partway there. I can't figure out how to reference the text nodes of the xml. I have put the date in a label attribute for testing for now. Give this a try and see if it is approaching what you want.


          <?xml version="1.0" encoding="utf-8"?>
          <!-- There is a bug in Repeater that prevents XMLList from being used as a dataProvider -->
          <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
          import mx.collections.ArrayCollection;

          private var _ArrayCollection:ArrayCollection = new ArrayCollection;
          private function initApp():void
          var xmlAccordion:XML =
          <item label="A">ITEM A
          <subitem label="A1">SUBA1</subitem>
          <subitem label="A2">SUBA2</subitem>
          <item label="B">ITEM B
          <subitem label="B1">SUBb1</subitem>
          <subitem label="B2">SUBB2</subitem>
          <subitem label="B3">SUBB3</subitem>

          var xl:XMLList = xmlAccordion.item;
          _ArrayCollection = convertArrayCollection(xl)

          //Converts an XMLList into an ArrayCollection
          private function convertArrayCollection(xl:XMLList):ArrayCollection
          var ac:ArrayCollection = new ArrayCollection;
          for (var i:int=0;i<xl.length();i++) {
          ac.addItem(xl );
          return ac;

          <mx:Accordion width="300">
          <mx:Repeater id="r" dataProvider="{_ArrayCollection}">
          <mx:HBox label="{r.currentItem.@label}" width="100%">
          <mx:Repeater id="rsub" dataProvider="{convertArrayCollection(r.currentItem.subitem)}">
          <mx:Button label="{rsub.currentItem.@label}" />
          • 2. Re: Repeater and Accordion
            ntsiii Level 3
            I really hate that this forum has no way to post formatted code!
            • 3. Re: Repeater and Accordion
              Level 7
              Hi --

              I have been playing around some more and learned about creating new elements
              via ActionScript..

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
              import mx.containers.Canvas;

              public var newCanvas : Canvas;

              public function clickUpdateAccordion():void {
              for (x = 0; x < 5; x++) {
              newCanvas = new Canvas()
              newCanvas.label = "Pane " + x.toString();

              <mx:Accordion x="0" y="0" width="200" height="100%" id="holderAcc">
              <mx:Button x="263" y="98" label="Add Accordion"


              "ntsiii" <tspratt@lariatinc.com> wrote in message
              >I really hate that this forum has no way to post formatted code!

              • 4. Re: Repeater and Accordion
                YEP.... sure would be nice to be able to post some damn code in this forum.... wake up adobe. enable already. just like you do with the Flash Actionscript forum
                • 5. Re: Repeater and Accordion
                  ur_dtrain Level 1
                  Some good XML tips:
                  for each(var itemNode:XML in XMLList(myXML))
                  for each(var itemValueNode:XML in itemNode.children()){

                  itemValueNode.name(); //node name
                  itemValueNode.text(); //text node content
                  itemValueNode.@myAttribute; //attrube value reference