multiple iron-collapse not working, expands only first

问题

I'm trying to create multiple iron-collapse elements with content inside. I want the iron-collapse to expand when user clicks on a button. The problem is that I can't get each element expanded individually. The script catches only first element and does not affect the others. I've tried many code samples but without success. Can someone help me? My code is below:

var expandContent = document.getElementById('mybutton');
    expandContent.onclick = function(event) {
      var moreInfo = document.getElementById('moreinfo');
      var iconButton = Polymer.dom(event).localTarget;
      iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-down'
                                        : 'hardware:keyboard-arrow-up';
      
      /*moreInfo.toggle();*/ /* This one works to, don't know which is better */
      
      event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
    };

<paper-card style="width:100%;line-height:56px;font-size:16px;font-weight:400;">
  <paper-icon-button class="mybutton" id="mybutton" icon="hardware:keyboard-arrow-up" style="float:right;margin:8px;" >
  </paper-icon-button>
    <iron-icon icon="communication:forum"></iron-icon>
    <iron-collapse id="moreinfo" class="moreinfo" style="width:100%;">
      <paper-item>
        <iron-icon icon="info"></iron-icon>
        <paper-item-body two-line>
          <div>Primary text</div>
          <div secondary>Secondary text</div>
        </paper-item-body>
      </paper-item>
      <paper-item>Second item</paper-item>
      <paper-item>Third item</paper-item>
    </iron-collapse>
</paper-card>

I want only one collapse to expand after it's corresponding button is being pressed. Is there way to change this code to achieve what I need, without complete rewrite, because only with this code iron-collapse works properly and changes its attribute expanded="yes/no", which I later use with cookies?

回答1:

The problem is here:

var expandContent = document.getElementById('mybutton');

Why are you looking for "mybutton" on entire document? You don´t need to do that because Polymer´s encapsulate each component so you can use it in multiples situations.
As documentation say´s:

Polymer automatically builds a map of statically created instance nodes in its local DOM, to provide convenient access to frequently used nodes without the need to query for them manually. Any node specified in the element’s template with an id is stored on the this.$ hash by id.

So, you need to change document.getElementById('mybutton') to this.$.mybutton to refer the local dom button. On this way, should work.

Edit

Using your code and not doing it as it should in Polymer, maybe this will help you:

var idArray =["mybutton","mybutton2","mybutton3"];
idArray.forEach(function(item,index,array){
    var expandContent = document.getElementById(item);
    expandContent.onclick = function(event) {
    var moreInfo = document.getElementById('moreinfo');
    var iconButton = Polymer.dom(event).localTarget;
    iconButton.icon = moreInfo.opened ? 'hardware:keyboard-arrow-down'
                                    : 'hardware:keyboard-arrow-up';

    /*moreInfo.toggle();*/ /* This one works to, don't know which is better */

    event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
};

}.bind(this));

回答2:

Update Ok, i found proper solution after reading some forums and js docs, i will write it down, maybe someone needs it too.

 var elems = document.getElementsByClassName('mybutton'); // Getting all button with same class name
for(var i = 0; i < elems.length; i++) { // Adding count indexes to buttons starting from first is 0       
    elems[i].onclick = function(event){ //And here is function to do expand/collapse, it can be any other function too, main idea was to get work/trigger all items with same class
        var expandContent = event.currentTarget.parentElement.querySelector('iron-collapse');
        var iButton = Polymer.dom(event).localTarget;
        iButton.icon = expandContent.opened ? 'hardware:keyboard-arrow-down' : 'hardware:keyboard-arrow-up';
        event.currentTarget.parentElement.querySelector('iron-collapse').toggle();
        console.log("Works ! Great !!!");
    }
}

来源：https://stackoverflow.com/questions/35653441/multiple-iron-collapse-not-working-expands-only-first