Polymer2.0- Multiple Iron collapse using class
Question
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);
2 answers
solution1
0 ACCPTED 2017-07-30 04:02:55
I suggest you to use custom attribute. Here is the working solution: https://codepen.io/Sahero/pen/VzeWNd
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>
<button on-click="toggle" my-attribute="collapse1">toggle
collapse</button>
<iron-collapse id="collapse1" class="collapse">
<div>Enter text collapse1</div>
</iron-collapse>
<button on-click="toggle" my-attribute="collapse2">toggle
collapse</button>
<iron-collapse id="collapse2" class="collapse">
<div>Enter text collapse2</div>
</iron-collapse>
<button on-click="toggle" my-attribute="collapse3">toggle
collapse</button>
<iron-collapse id="collapse3" class="collapse">
<div>Enter text collapse3</div>
</iron-collapse>
</template>
</dom-module>
</body>
JS:
class XFoo extends Polymer.Element {
static get is() { return 'x-foo'; }
static get properties() {
return {};
}
toggle(e) {
//console.log(this);
var id = e.target.getAttribute('my-attribute');
console.log(id);
this.shadowRoot.querySelector('#'+id).toggle();
//this.shadowRoot.querySelector('.collapse').toggle();
}
}
customElements.define(XFoo.is, XFoo);
solution2
0 2018-06-19 17:18:41
A way to achieve this for <dom-repeat> items is to use the event's currentTarget so that you can select the element where the method was called. I have an example where you have multiple list items ( paper-listbox ) with an icon of a right arrow that changes to a down arrow when the iron-collapse item is expanded. In my example no class is needed, but you could just as easily have e.currentTarget.querySelector('.theClass')
Example:
<dom-repeat items={{list}}>
<template>
<paper-listbox on-click="toggle">
<iron-icon id="icon" icon="icons:chevron-right"></iron-icon>
<paper-item>{{item.title}}</paper-item>
<iron-collapse class="collapse">
<p>Content here . . . </p>
</iron-collapse>
</paper-listbox>
</template>
</dom-repeat>
and the JS below it:
toggle(e) {
// currentTarget selects the paper-listbox where the toggle method occurred.
var collapseArea = e.currentTarget.querySelector('iron-collapse');
var theIcon = e.currentTarget.querySelector('iron-icon');
collapseArea.toggle();
// toggle the icon for list item from right arrow to downward arrow
(theIcon.getAttribute('icon') === 'icons:chevron-right') ? theIcon.setAttribute('icon', 'icons:expand-more') : theIcon.setAttribute('icon', 'icons:chevron-right');
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.