title: Programmatically controlling a Dojo Accordion
body: <p>I have a dijit.layout.AccordionContainer on my page which is defined in the html and created when dojo parses the page on load.</p>
  
  <p>Then, as the user interacts with the page I use Ajax to retrieve data and programmatically populate the container (removing existing items first).</p>
  
  <p>To illustrate my issue simply, here is some code that doesn't work:</p>
  
  <pre><code>   function doit() {
          var accordion = dijit.byId("accordionShell");
          accordion.getChildren().each(function(item) {
              accordion.removeChild(item);
          });
          for (i = 1; i &lt; 5; i++) {
              var d = new dijit.layout.AccordionPane({title:'hello', content:'world'});
              accordion.addChild(d);
          }
      }
  </code></pre>
  
  <p>This fails, because only the first item in the accordian is visible. I think the others actually exist, but they are not visible so you can't do anything.</p>
  
  <p>I've managed to get around it by:</p>
  
  <ol>
  <li>Always ensuring there is 1 item in the accordian (so I never remove the first child)</li>
  <li>Call accordian.layout() after changing the contents</li>
  </ol>
  
  <p>So, this code "works" as long as you always want to see the first item, and don't actually expand any but the first one:</p>
  
  <pre><code>   function doit() {
          var accordion = dijit.byId("accordionShell");
          var i = 0;
          accordion.getChildren().each(function(item) {
              if (i &gt; 0) accordion.removeChild(item);
              i++;
          });
          for (i = 1; i &lt; 5; i++) {
              var d = new dijit.layout.AccordionPane({title:'hello', content:'world'});
              accordion.addChild(d);
          }
          accordion.layout();
  
      }
  </code></pre>
  
  <p>I am using Dojo 1.2.0 - Anyone know what I am doing wrong?</p>