I am trying to achieve multiple iron collapse using class instead of id
Solution mentioned in the question- Polymer Multiple Iron-Collapse works but i have more iron collapses which I dont want to create duplicate code for same functionality
I tried different options trying to select corresponding element using class instead of id
codepen- https://codepen.io/nagasai/pen/YxyqmE
HTML:
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="iron-collapse/iron-collapse.html">
<link rel="import" href="paper-input/paper-input.html">
</head>
<body>
<x-foo attr="{{text}}"></x-foo>
<dom-module id="x-foo">
<template id="collapse1">
<button on-click="toggle">toggle collapse</button>
<iron-collapse class="collapse">
<div>Enter text collapse1</div>
</iron-collapse>
<button on-click="toggle">toggle collapse</button>
<iron-collapse class="collapse">
<div>Enter text collapse2</div>
</iron-collapse>
<button on-click="toggle">toggle collapse</button>
<iron-collapse class="collapse">
<div>Enter text collapse2</div>
</iron-collapse>
</template>
</dom-module>
</body>
JS:
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle() {
console.log(this);
this.$.querySelector('.collapse').toggle();
}
}
customElements.define(XFoo.is, XFoo);
I suggest you to use custom attribute. Here is the working solution: https://codepen.io/Sahero/pen/VzeWNd
HTML:
JS: