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

Well this answer is pretty late none the less I think hiding and showing elements in Polymer should be done like this.

A template specified as a dom-if. The elements inside it will be displayed if property sendInProgress is false.

<template is="dom-if" if="{{!sendInProgress}}">
          <paper-input id="replyInputField"></paper-input>
</template>
<paper-button class="reply-button" on-click="_handleReply">Send</paper-button>


Polymer({
  is: 'hide-elements',
  properties: {
  sendInProgress: {value: false, notify: true}
  },
  _handleReply: function() {

    if (this.sendInProgress){
      //Will display element #replyInputField
      this.set('sendInProgress', false);
    } else {
      //Will hide element #replyInputField
      this.set('sendInProgress', true);
    }
  }


});

Answer 2

You can also remove the hidden attribute declaratively and just do everything imperatively.

Like this:

<div id="autoUpdate" class="autoUpdate">content</div>
...
if (e.target.checked) {
  this.$.autoUpdate.hidden = true;
} else {
  this.$.autoUpdate.hidden = false;
}