CODEWITHSUNDEEP
javascriptpolymer
shan
shan

Reputation: 3145

how to use polymer core-collapse like an accordion?

a bit stuck here. Here's my js currently:

     Polymer('test-element', {

          toggleOne: function() {
              var colOne = this.$.collapseOne;
              colOne.toggle();
          },

          toggleTwo: function () {
              var colTwo = this.$.collapseTwo;
              colTwo.toggle();
          }
      });

and here's the corresponding html:

<div on-click="{{toggleOne}}">
    test test test
</div>

<core-collapse id="collapseOne">
    test test test test test
</core-collapse>

<div on-click="{{toggleTwo}}">
    test test test
</div>

<core-collapse id="collapseTwo">
    test test test test test
</core-collapse>

Firstly: Is there a way to consolidate this into some cleaner code? I have like 12 of these so it seems a bit inefficient..

Secondly: I think the answer to my first question will help with this -- I know how to test if one is open or not, but I don't know how to test within a different expression for if that one is open or not. For instance, I need to check

if (colOne.opened)

and have it set

colTwo.closed

and vise-versa, for all of them. I don't want to do something horrendous like this:

if (colOne.closed && colTwo.closed && colThree.closed && colFour && ...)

I need to have them in the same function I think, just a bit confused about how to format this, if anyone can shed some light? Thanks! Any help is appreciated!

edit: I know polymer has an accordion UI but since it's experimental I don't want to use it quite yet.

Upvotes: 2

Views: 3482

Answers (1)

ebidel
ebidel

Reputation: 24109

One way to do this is use <core-selector> to manage the selection state and make sure only one <core-collapse> is open:

<core-selector selected="{{selected}}">
  <template repeat="{{item, i in items}}">
    <core-collapse opened?="{{selected == i}}" fixedSize style="height:150px">
      <div>...stuff...</div>
    </core-collapse>
  </template>
</core-selector>

With a little bit of extra CSS you get something like: http://jsbin.com/mubekiyuvafi/1/edit

Ah, looking at polymer-ui-accordion (DEPRECATED), it extends polymer-selector (the precursor to core-selector) :)

Upvotes: 6

Related Questions