title: Using jquery toggle() inside a custom polymer element
body: <p>I want to use a button to toggle a word on click like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggle() {
      $("#secret").toggle();
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;body&gt;
      &lt;button onClick="toggle()"&gt; toggle &lt;/button&gt;
      &lt;p id="secret" style="display: none"&gt; secret &lt;/p&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This works without problems but when using the code inside a custom Polymer element, the word is only shown but not hidden again.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//www.polymer-project.org/components/polymer/polymer.js"&gt;&lt;/script&gt;
  
  &lt;polymer-element name="test-element"&gt;
      &lt;template&gt;
          &lt;button on-tap="{{toggle}}"&gt; toggle &lt;/button&gt;
          &lt;p id="secret" style="display: none"&gt; secret &lt;/p&gt;
      &lt;/template&gt;
      &lt;script&gt;
          Polymer({
              toggle: function() {
                  $(this.$.secret).toggle();
              }
          });
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  
  &lt;test-element&gt;&lt;/test-element&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, using <code>show()</code> and <code>hide()</code> works:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="//www.polymer-project.org/components/polymer/polymer.js"&gt;&lt;/script&gt;
  
  &lt;polymer-element name="test-element"&gt;
      &lt;template&gt;
          &lt;button on-tap="{{toggle}}"&gt; Toggle &lt;/button&gt;
          &lt;p id="secret"&gt; secret &lt;/p&gt;
      &lt;/template&gt;
      &lt;script&gt;
          Polymer({
              toggle: function() {
                  if ($(this.$.secret).css("display") == "block") {
                      $(this.$.secret).hide();
                  } else {
                      $(this.$.secret).show();
                  }
              }
          });
      &lt;/script&gt;
  &lt;/polymer-element&gt;
  
  &lt;test-element&gt;&lt;/test-element&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Why is the <code>toggle()</code> function working itself but not working inside a custom polymer element when <code>show()</code> and <code>hide()</code> are working ?</p>