Dojo Dijit programatic accordion

Question

Attempting to work towards a dynamic accordion menu in a dynamic layout. Running startup() on the top level container, which IIRC is per the docs, the accordion does not initialize, that is only the first pane is displayed. Not running startup on the top level container initializes the accordion (though it seems wonky) but does not initialize the layout. All dynamic code removed to demonstrate the problem. Thanks for any ideas.

<!DOCTYPE html>
<html >
<head>

    <link rel="stylesheet" href="css/style4.css" media="screen">
    <script>dojoConfig = {parseOnLoad: true}</script>
    <script src="dojo.1.9.3/dojo/dojo.js"> </script>

    <script>
require([
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/TabContainer",
    "dijit/layout/AccordionContainer", 
    "dijit/layout/AccordionPane",
    "dojo/domReady!"
], function(BorderContainer, ContentPane, TabContainer, AccordionContainer, AccordionPane){

    var bc = new BorderContainer({style: "height: 600px; width: 800px;"});

    var cp1 = new ContentPane({
        region: "left",
        style: "height: 400px",
        content: "hello world"
    });
    bc.addChild(cp1);
    var cp2 = new ContentPane({
        region: "center",
        style: "height: 400px",
    });
    var aContainer = new AccordionContainer();
    aContainer.addChild(new AccordionPane({
        title: "number one",
        content: "Hello world"
    }));
    aContainer.addChild(new AccordionPane({
        title: "number two",
        content: "Hello Goodbye"
    }));
    cp2.addChild(aContainer);
    bc.addChild(cp2);
    document.body.appendChild(bc.domNode);
    bc.startup();
    //cp2.startup();
});
    </script>
</head>
<body class="claro">

</body>
</html>

What works - initialize accordioncontainer with region: "center" and add directly to top element avoiding in intermediate container. — openquestions

g00glen00b g00glen00b · Accepted Answer · 2014-05-21T20:05:53

This looks like a simple typo to me, there is no such thing as a module called dijit/layout/AccordionPane. In order to use an AccordionContainer you just use the ContentPane as well, as you can see in the examples on the reference guide. For example:

var aContainer = new AccordionContainer();
aContainer.addChild(new ContentPane({
    title: "number one",
    content: "Hello world"
}));
aContainer.addChild(new ContentPane({
    title: "number two",
    content: "Hello Goodbye"
}));

Simply replacing the AccordionPane's by ContentPane's seems to work just fine, as you can see in this JSFiddle: http://jsfiddle.net/34NN6/

Dojo Dijit programatic accordion

1 Answers