Polymer iron-collapse with dom-repeat snippet

repeat-collapse-snippet.html

<link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../bower_components/iron-collapse/iron-collapse.html">

<dom-module id="your-element">
  <template>
    <style>

      .heading {
        padding: 10px 15px;
        margin-top: 20px;
        background-color: #f3f3f3;
        border: 1px solid #dedede;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        font-size: 18px;
        cursor: pointer;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        width: 100%;
        text-align: left;
      }
      .content {
        padding: 15px;
        border: 1px solid #dedede;
        border-top: none;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        @apply(--shadow-elevation-2dp);
      }
    </style>

      <div class="card">
        <template is="dom-repeat" items="{{data}}" as="item" indexAs="index">

          <button class="heading" ident$="subitem[[index]]" on-tap="toggle">
            <iron-icon icon="expand-more"></iron-icon>
            <span>[[item.gender]]</span>
          </button>
          <iron-collapse ident$="subitem[[index]]">
            <div class="content">
              Hello world
            </div>
          </iron-collapse>
        </template>
      </div>

  </template>
  <script>
    Polymer({
      is: 'your-element',
      properties: {
          data: {
            type: Object,
          },
      },

      // Manages the iron-collapse elements
      toggle: function (event) {
        var id = event.currentTarget.getAttribute('ident');
        var collapse = this.$$('iron-collapse[ident="' + id + '"]');

        collapse.toggle();
      },

    });
  </script>
</dom-module>

Directly taken from official Polymer elements demo

Logic is an adaptation of Günter Zöchbauer's answer on StackOverflow

Nb. I didn't tested this snippet so far, it may need to be adapted a bit, will probably do that later

I got another solution. (I used Polymer 2)
Html:

<template is="dom-repeat" items="[[someArray]]">
...
<paper-icon-button icon="menu"  data-index$="[[index]]" on-click="_toggleInfo"></paper-icon-button>
...
</template>
...
...
<iron-collapse id$="collapse[[index]]">
  <div>
    <span>Initiator:</span>
    <span>[[item.initiator]]</span>
  </div>
</iron-collapse>

JS:

...
_toggleInfo(e) {
  var collapseElem = this.shadowRoot.querySelector('#collapse'+e.currentTarget.dataset.index);
  collapseElem.toggle();
}

For me, the best way by far is to create an element that contains all the logic then just put this element in the dom-repeat:

<div class="card">
  <template is="dom-repeat" items="{{data}}" as="item" indexAs="index">
    <fancy-card person="[[item]]"></fancy-card>
  </template>
</div>

...

// fancy-card.html

<button class="heading" on-tap="toggle">
  <iron-icon icon="expand-more"></iron-icon>
  <span>[[item.gender]]</span>
</button>

<iron-collapse id="collapse">
    <div class="content">
      Hello world
      </div>
</iron-collapse>

toggle() {
  this.$.collapse.toggle();
}

Edit: not sure that actually works...