Unable to call Core Collapse toggle inside Template repeat Polymer

[microice89]

I am trying to toggle the core collapse panel called inside repeating template element. I have provided dynamic ID to the core collapse element but on tap it says : Uncaught TypeError: boolean is not a function

My code is :

<template>
<template repeat="{{ data }}">
    <style>
        ......
    </style>
    <paper-shadow z="1" class="card">
        <span class="info-bar">{{ cardID }}</span>
        <div vertical layout>
            <div>
                <div horizontal layout>
                    <div flex style="color:#757575;">
                        <span>Date : </span><br /><span>March 15, 2015</span>
                    </div>
                    <div style="text-align:right;">
                        <paper-icon-button flex icon="subject" style="color:#ed485c;" on-tap="{{ toggle }}" id="{{ cardID }}"></paper-icon-button>
                        <paper-icon-button flex icon="social:share" title="clear" style="color:#ed485c;"></paper-icon-button>
                    </div>
                </div>
            </div>
            <core-collapse id="{{ cardID }}">
                <span> Collapse Content </span>
            </core-collapse>
        </div>
    </paper-shadow>
</template>

My script is :

<script>
Polymer('i-card', {
    toggle: function (e, detail, sender) {
        var iid = e.target.templateInstance.model.cardID;
        this.shadowRoot.querySelector('#' + iid).toggle();
    },
    ready: function () {
        this.data = this.getData();
    },
    getData: function () {
        var data = [];
        for (var i = 0; i < 100; i++) {
            data.push({
                cardID : 'icard-' + Math.floor(Math.random()*(1000-1+1)+1),
            });
        }
        return data;
    }
});

I need to toggle their respective collapse element on tap.

[jlg7]

@microice89 - you scared me! i hope this isn't a bug and you may get directed to stackoverflow! Perhaps you are running into an id namespace collision since you are using the same id for your paper-button and core-collapse instance for each data item.

Definitely use chrome dev tools and debug your source:

Removing the "id" attribute of your paper-button or simply changing it seemed to allow your code to work!

Thanks, @jongeho1

[microice89]

thanks for the response. It saved my life. Setting same ID on both element was the main culprit. I didn't notice that.