CODEWITHSUNDEEP
javascripthtmlpolymerpolymer-1.0
nitansh bareja
nitansh bareja

Reputation: 302

Toggling iron-collapse using javascript

I'm using multiple <iron-collapse>s with different IDs, and I have a <paper-icon-button> associated with each <iron collapse>.

I can use the <iron-collapse>s with their associated button when the screen is wider than 650px, but in narrower widths, why does clicking the <paper-icon-button> not toggle the <iron-collapse>?

I even tried to change the class of a particular <iron-collapse>, but no luck. Toggling the display property didn't help.

Here's the template:

<paper-icon-button 
  class="pull-left" 
  id$="generalSectionToggle##[[yearEntries]]-[[monthEntries]]"
  icon="expand-less"
  on-click="toggleGeneralSection">
</paper-icon-button>
<iron-collapse id$="generalSection-[[yearEntries]]-[[monthEntries]]" opened="true">
   <div class="container-vertical">
     Some Content 
   </div>
</iron-collapse>

Here's the on-click handler (toggleGeneralSection):

var elementID = event.target.parentElement.id.split("##")[1]
var element = "generalSection-" + elementID
var domElement = document.getElementById(element);
if (window.innerWidth > 650) {
    domElement.toggle();  
} else {
    if (domElement.opened) {
        domElement.classList.toggle('iron-collapse-closed');
    } else {
        domElement.classList.toggle('iron-collapse-opened');
    }
}

if (domElement.opened) {
    event.target.icon = "expand-less";
} else {
    event.target.icon = "expand-more";
}

Upvotes: 0

Views: 508

Answers (1)

tony19
tony19

Reputation: 138356

The iron-collapse doesn't toggle when the window is less than 650px because you're not calling <iron-collapse>.toggle() in that scenario. Instead, you're toggling an internal class. It seems the intention is to always toggle regardless of the screen width, so you should always call <iron-collapse>.toggle().

Also, you should avoid using document.getElementById() in your click-handler to fetch the <iron-collapse> because it won't work in Shadow DOM. Instead, you could use this.$$(selector). In your case, you're querying for an element ID, so you should prefix element with # (i.e., "#generalSection-" + elementID).

Your code should look more like this:

var elementID = event.target.parentElement.id.split("##")[1]
var element = "#generalSection-" + elementID
var domElement = this.$$(element);
domElement.toggle();  

if (domElement.opened) {
    event.target.icon = "expand-less";
} else {
    event.target.icon = "expand-more";
}

See this codepen demo that toggles the <iron-collapse> with <paper-icon-button> and uses a computed binding for the icon. And see this codepen for a variation that makes the header a clickable toggle.

Upvotes: 1

Related Questions