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>