Polymer Multiple Iron-collapse
The polymer docs aren't clear on how to create a multiple toggle using iron-collapse. Is there an easy way to get each item to toggle? I had a look at multiple iron-collapse not wo
Solution 1:
Polymer's automatic node finding maps nodes by their IDs, but you have two nodes with the same ID, so only the last one encountered would be mapped to that ID (i.e., this.$.collapse refers to the second iron-collapse in your example). Also, since your click-handler refers to the same iron-collapse, both paper-items would toggle the same iron-collapse when clicked.
The quickest solution would be to use unique node IDs for each iron-collapse and to use unique click handlers:
<head><basehref="https://polygit.org/polymer+v1.9.2/components/"><scriptsrc="webcomponentsjs/webcomponents-lite.js"></script><linkhref="paper-item/paper-item.html"><linkhref="iron-collapse/iron-collapse.html"></head><body><x-foo></x-foo><dom-moduleid="x-foo"><template><divon-click="toggle1"><paper-item><aclass="paper-item-link"><strong>List Items</strong></a></paper-item></div><iron-collapseid="collapse1"><div>Content</div></iron-collapse><divon-click="toggle2"><paper-item><aclass="paper-item-link"><strong>List Items</strong></a></paper-item></div><iron-collapseid="collapse2"><div>Content</div></iron-collapse></template><script>HTMLImports.whenReady(function() {
Polymer({
is: 'x-foo',
toggle1: function() {
this.$.collapse1.toggle();
},
toggle2: function() {
this.$.collapse2.toggle();
}
});
});
</script></dom-module></body>
Post a Comment for "Polymer Multiple Iron-collapse"