<template is="dom-repeat" items="[[ data ]]" as="child">
  <div class="child-item">
    <div class="info" on-click="_toggleClick">
      <paper-item>
          <iron-icon icon="arrow-drop-up" class="rotate-90"></iron-icon>
          <span>[[ child.name ]]</span>
      </paper-item>
    </div>

    <iron-collapse opened="false">
      <div>Details for child go here</div>
    </iron-collapse>
  </div>
</template>

...

<script>
  Polymer({
    is: 'child-details',
    properties: {
      data: {
        type: Array,
        value: function() {
          return [];
        }
      },
    },

    _toggleClick: function(e, detail) {
      try {
        var arrowElement = document.querySelector('iron-icon');
        arrowElement.classList.toggle('rotate-clockwise-90');
      } catch (ex) {
        console.log('Unable to rotate arrow.');
        console.log(ex);
      }

      try {
        var element = Polymer.dom(parent).querySelector('iron-collapse');
        element.toggle();
      } catch (ex) {
        console.log('Unable to toggle iron-collapse.');
        console.log(ex);
      }
    }
  });
</script>

Unable to toggle iron-collapse.
TypeError: Cannot read property 'toggle' of undefined(...)

document.querySelector('iron-icon');

var element = Polymer.dom(parent).querySelector('iron-collapse');

var div = Polymer.dom(e).rootTarget;
div.querySelector('iron-icon').classList.toggle('rotate-clockwise-90')
div.querySelector('iron-collapse').toggle();

<style>
  .opened iron-icon {
     transform: rotateZ(180deg);
     transition: transform 0.3s;
  }
</style>

<template is="dom-repeat" items="[[ data ]]" as="child">
  <div class$="child-item [[isOpenedBasedOn(index, currentOpenedCollapsable)]]">
    <div class="info" id="[[index]]" on-click="_toggleClick">
      <paper-item>
          <iron-icon icon="arrow-drop-up"></iron-icon>
          <span>[[ child.name ]]</span>
      </paper-item>
    </div>

    <iron-collapse opened="[[isOpenedBasedOn(index, currentOpenedCollapsable)]]">
      <div>Details for child go here</div>
    </iron-collapse>
  </div>
</template>

...

<script>
  Polymer({
    is: 'child-details',
    properties: {
      data: {
        type: Array,
        value: function() {
          return [];
        }
      },
      currentOpenedCollapsable: {
        type: Number,
        value: -1
      }
    },

    // set index, but close (set to -1) if clicking on the same element.
    _toggleClick: function(e) {
      var currentIndex = e.currentTarget.id

      if (this.currentOpenedCollapsable == currentIndex) {
        currentIndex = -1;
      }

      this.set('currentOpenedCollapsable', currentIndex);
    },

    // Using the javascript fact that a filled string is always true while an empty string is always false
    isOpenedBasedOn: function(elementIndex, currentIndex) {
      return (elementIndex == currentIndex) ? 'opened' : '';
    },
  });
</script>