Reputation: 1075
I've got a group of dijit/titlepanes that I'm trying to make behave like an accordion (when one gets clicked the others close). I've been able to do this using the click event of the panes in the code below. The problem is that I need to assign ids to the panes in order to get it to work. Is there anyway I can grab the data-dojo-attachpoint of the panes on the click event of the pane? Assigning the ids is creating problems because the widget needs to be created multiple times
Markup of Titlepanes in widget:
<div id="P1" data-dojo-attach-point="P1" data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'1: Step 1', closable:false, open:false" data-dojo-attach-event="onClick:ClickPane"/>
<div id="P2" data-dojo-attach-point="P2" data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'2: Step 2', closable:false, open:false" data-dojo-attach-event="onClick:ClickPane"/>
<div id="P3" data-dojo-attach-point="P3" data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'3: Step 3', closable:false, open:false" data-dojo-attach-event="onClick:ClickPane"/>
<div id="P4" data-dojo-attach-point="P4" data-dojo-type="dijit/TitlePane"
data-dojo-props="title:'4: Step4', closable:false, open:false" data-dojo-attach-event="onClick:ClickPane"/>
code:
ClickPane: function (evt) {
//close all other panes after one has been clicked
var panesName = ["P1", "P2", "P3", "P4"];//ids
var panes = [this.P1, this.P2, this.P3, this.P4];
var pane = evt.currentTarget.id;//id like to be able to grab attachpoint here
var index = panesName.indexOf(pane);
if (index > -1) {
panes.splice(index, 1);
for (var i = 0; i < panes.length; i++) {
panes[i].set("open", false)
}
}
},
I could use a css accordion, but I really like the way these title panes look and work
Thanks
Upvotes: 0
Views: 269