Hi,
Please create a html page and paste the below code.
<html>
<head>
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
<script>
var dojoConfig = {
async: true,
parseOnLoad: true
};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js">
</script>
<script>
dojo.require("dijit.dijit");
dojo.require("dijit.TitlePane");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.Dialog");
var titlePanes = [];
dojo.addOnLoad( function(data) {
console.log(dijit.byId('pane1'));
dojo.connect(dojo.byId('Submit') , 'onclick', function(){
var counter = dijit.byId('paneCounter').get('value');
if(counter > 1) {
titlePanes = [];
dojo.empty(dojo.byId('container'));
for(i=0; i< counter; i++){
titlePanes.push( new dijit.TitlePane( {
title: 'Pane - ' + i ,
content : 'content of Pane - ' + i,
onClick : function() {
dojo.forEach(titlePanes, function(pane){
pane.set('open',false);
});
this.toggle();
}
}).placeAt(dojo.byId('container')));
}
} else {
new dijit.Dialog({
content: "Enter atleast 2!",
style: "width: 300px",
title : 'Alert'
}).show();
}
dojo.forEach(titlePanes, function(pane){
pane.set('open',false);
});
});
});
</script>
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/widget/Portlet/Portlet.css"
</head>
<body class=" claro ">
How many panes do you want ? <input dojotype="dijit.form.NumberTextBox" id="paneCounter" />
<input type="button" id="Submit" value="Submit" />
</body>
</html>