CODEWITHSUNDEEP
javascriptpolymer
Vims
Vims

Reputation: 179

Polymer check if element is opened & assign css class to parent

I have a Polymer element called <collapse-item>, which, when it is opened, gets an attribute opened. (collapse-item is based on iron-collapse) But how can I check with JS if this element is opened and then assign another css class to it's parent?

<template is="dom-repeat" items="{{booksList}}">
  <div class="parent">
    <h1>Some header</h1>
    <p>Some text</p>
    <collapse-item input-text={{item.blurb}}></collapse-item>
  </div>
</template>

I only want to assign a new css class to this one instance of the <div class="parent"> and not to all the others on the page.

EDIT option 1

I have changed the above to add a check for the opened item and added some js:

<template is="dom-repeat" items="{{booksList}}">
  <div class="parent" id="[[_toggleId]]">
    <h1>Some header</h1>
    <p>Some text</p>
    <collapse-item input-text={{item.blurb}} opened="{{opened}}"></collapse-item>
  </div>
</template>

JS:

  properties: {

  _toggleId: {
      type: String,
      computed: '_computeToggleId(opened)'
    }

  },
  _computeToggleId: function(opened) {
      return opened ? 'expandeditem' : '';
  }

This creates the id not just for this once instance of the parent class, but all of them in the dom-repeat.

EDIT option 2

<template is="dom-repeat" items="{{booksList}}">
  <div class="parent" id="parentElem">
    <h1>Some header</h1>
    <p>Some text</p>
    <collapse-item input-text={{item.blurb}} opened="{{opened}}" on-tap="_computeToggleId(opened)"></collapse-item>
  </div>
</template>

JS:

  _computeToggleId: function(opened) {
    if (opened) {
      this.$.parentElem.classList.add('expandeditem');
    }

Which cannot read the classList of undefined.

Thanks for helping me to learn. I'm new to Polymer.

Upvotes: 0

Views: 463

Answers (1)

ksh
ksh

Reputation: 649

you can bind a property to opened attribute. here is the example for iron-collapse

<iron-collapse opened={{isOpen}}>
  <div class="parent" id="parentElem">
   <div>Content goes here...</div>
  </div>
</iron-collapse>

then you can check condition if(isOpen) is true or false, based on that change CSS class of parent element. Assign id to parent element and add or remove class name with id

      this.$.parentElem.classList.remove('YOUR_CSS_CLASS_NAME');
      this.$.parentElem.classList.add('YOUR_CSS_CLASS_NAME');

Upvotes: 1

Related Questions