Iron-collapse throws a error to console - polymer

Question

I have a problem with using iron-collapse. When i use it throws a error to console. I have no idea.
Here is my example of template structure:
<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">
<dom-module id="page-faq">
<template>
<header-layout id="header"></header-layout>
<bread-crumb id="bread-crumb"></bread-crumb>
<div class="wrapper">
<div id="faq-container">
<div id="tabs">
</div>
<template is="dom-repeat" items="[[items]]">
<div class="collapse-container">
<button on-click="toggle">[[item.content.title]]</button>
<iron-collapse id="collapse">
<div class="collapse-content">
[[item.answer]]
</div>
</iron-collapse>
</div>
</template>
</div>
</div>
<footer-layout id="footer"></footer-layout>
</template>
<script type="text/javascript">
class PageFaq extends Polymer.Element {
static get is() {
return 'page-faq'
}
toggle() {
this.$.collapse.toggle();
this.$.button.setAttribute('aria-expanded', this.$.collapse.opened);
};
}
customElements.define(PageFaq.is, PageFaq);
</script>
</dom-module>
And when i click button it gives me
TypeError: Cannot read property 'toggle' of undefined
What did i do wrong ? Any advice ?

Answer 1

What you're doing is the hard way, but I don't blame you because the documentation is misguiding. There is one easier way – and more following the Polymer thinking – to control iron-collapse, and that's with a variable. I named it ironCollapsableOpened in this case.
<button on-click="toggle">[[item.content.title]]</button>
<iron-collapse opened="[[ironCollapseOpened]]">
<div class="collapse-content">
[[item.answer]]
</div>
</iron-collapse>
toggle() {
this.set('ironCollapseOpened', !this.ironCollapseOpened);
};
iron-collapse creates a collapsible block of content. By default, the
content will be collapsed. Use opened or toggle() to show/hide the
content.
https://www.webcomponents.org/element/PolymerElements/iron-collapse