Polymer - show/hide div by paper-checkbox

Question

Coming from a Meteor background, I'd use JQuery to show/hide a div, with paper-checkbox like so:

HTML:

<paper-checkbox name="remoteLocation" id="remote-chk" checked>Remote Location</paper-checkbox>
<div id="autoUpdate" class="autoUpdate" style="display: none;">content</div>

Script:

Template.<templateName>.events({
  'change #remote-chk' : function(e){
      if (e.target.checked) {
        $('#autoUpdate').fadeOut('slow');
      } else {
        $('#autoUpdate').fadeIn('slow');
      }
    }
)};

Now, in Polymer 1.0, I am trying to implement the same thing:

<link rel="import" href="/bower_components/paper-checkbox/paper-checkbox.html">
<dom-module id="my-app">
 <template>
  <paper-checkbox name="remoteLocation" id="remote-chk" on-click="showMe" checked>Remote Location</paper-checkbox>
<div id="autoUpdate" class="autoUpdate" style="display: none;">content</div>
 </template>
 <script>
  Polymer({
   is: "my-app",
   showMe: function () {
           if (e.target.checked) {
             $('#autoUpdate').fadeOut('slow');
           } else {
             $('#autoUpdate').fadeIn('slow');
           }

         }
  });
 </script>
</dom-module>

Could someone spare a second eye, please, as nothing works? Thanks.

Answer 1

I believe fading transitions are still experimental in the polymer labs (I might be wrong tough) but to simple hide/show content a good approach can be :

in you index.html

<my-app></my-app>

you gave that component the name my-app in your example

the in your my-app.html

<link rel="import" href="../bower_components/paper-checkbox/paper-checkbox.html">
<dom-module id="my-app">
    <template>
        <paper-checkbox name="remoteLocation" id="remote-chk" on-click="showMe">Remote Location</paper-checkbox>
        <div id="autoUpdate" class="autoUpdate" hidden$="{{hide}}">content</div>
    </template>
    <script>
        Polymer({
            is: "my-app",
            properties: {
                hide: {
                    type: Boolean,
                    value: true // init the value to true so it will be hidden on page load
                }
            },
            showMe: function() {
                this.hide = !this.hide

            }
        });
    </script>
</dom-module>

using the data binding helper hidden

https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-if

you can set the property hidden to true and id the div you want to hide use

hidden$="{{hide}}"

the function showMe will then invert the boolean to true/false and thanks to the two way data binding the content will show up

For the fade in you can even use animate.css and use the syntax

class$="{{your-class}}"