How to use polymer.js to toggle hidden/show of an element

Question

I have two types of paper-card elements in the html page

<paper-card done> 
<paper-card>

There is also a button

<paper-icon-button icon="menu" on-tap="_show"></paper-icon-button>

I would like to use the _show function to set the style of <paper-card done> to toggle its view state, ie, toggle display between none and block . How to use polymer to do this? Thanks.

Answer 1

the fastest way to hide/show something in polymer is to use the "hidden" attribute with a boolean property and binding. Here is an example.

<paper-card done hidden$="[[hideDone]]"> 

The '$' before the equal is for telling polymer it's a boolean property and to handle it accordingly.

Then all you have to do is a

this.set('hideDone', true)

in your '_show' function, and that should do the trick :)

To show it again, just set the property to false again, and so on.