I am trying to add a new AccordionPane to a existing container, but for the life of me I can't get it to work.
Is anyone able to suggest where I am going wrong?
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="parseOnLoad: true"> </script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.AccordionContainer");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4.0/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
function AddNewPane() {
var accordPane = new dijit.layout.AccordionPane({"title": "test", "content":"hello"});
dijit.layout.AccordionContainer("myacc").addChild(accordPane);
accordPane.startup();
//select the new Pane
accordPane.selected = true;
}
</script>
</head>
<body>
<button type="button" onclick="AddNewPane();" >Add</button>
<div dojoType="dijit.layout.AccordionContainer" id="myacc" class="tundra" >
<div dojoType="dijit.layout.AccordionPane" title="Origional Acc 1" >
Testing One
</div>
<div dojoType="dijit.layout.AccordionPane" title="Origional Acc 2" >
Testing Two
</div>
</div>
<script>
document.getElementById("myacc").style.width = '200px';
document.getElementById("myacc").style.height = '200px';
</script>
</body>
</html>