get data-dojo-attachpoint of dijit/titlepane on click

269 views Asked by At

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

1

There are 1 answers

0
pvitt On

used dojox/widget/TitleGroup

worked great