CODEWITHSUNDEEP
javascriptjquerypolymer
user4389869
user4389869

Reputation:

Using jquery toggle() inside a custom polymer element

I want to use a button to toggle a word on click like this:

function toggle() {
    $("#secret").toggle();
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
    <button onClick="toggle()"> toggle </button>
    <p id="secret" style="display: none"> secret </p>
</body>

This works without problems but when using the code inside a custom Polymer element, the word is only shown but not hidden again.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.polymer-project.org/components/polymer/polymer.js"></script>

<polymer-element name="test-element">
    <template>
        <button on-tap="{{toggle}}"> toggle </button>
        <p id="secret" style="display: none"> secret </p>
    </template>
    <script>
        Polymer({
            toggle: function() {
                $(this.$.secret).toggle();
            }
        });
    </script>
</polymer-element>

<test-element></test-element>

However, using show() and hide() works:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//www.polymer-project.org/components/polymer/polymer.js"></script>

<polymer-element name="test-element">
    <template>
        <button on-tap="{{toggle}}"> Toggle </button>
        <p id="secret"> secret </p>
    </template>
    <script>
        Polymer({
            toggle: function() {
                if ($(this.$.secret).css("display") == "block") {
                    $(this.$.secret).hide();
                } else {
                    $(this.$.secret).show();
                }
            }
        });
    </script>
</polymer-element>

<test-element></test-element>

Why is the toggle() function working itself but not working inside a custom polymer element when show() and hide() are working ?

Upvotes: 1

Views: 1145

Answers (2)

Walid Ammar
Walid Ammar

Reputation: 4126

I don't think you have to use jQuery for "toggling" you can do that in more polymeric way:

<script src="//www.polymer-project.org/components/polymer/polymer.js"></script>

<polymer-element name="test-element">
  <template>
    <button on-tap="{{toggle}}">Toggle</button>
    <p id="secret" hidden?="{{!showingSecret}}">secret</p>
  </template>
  <script>
    Polymer({

      toggle: function() {
        this.showingSecret = !this.showingSecret;
      }
    });
  </script>
</polymer-element>

<test-element></test-element>

Upvotes: 2

jimi dough10
jimi dough10

Reputation: 2016

i don't think jquery works inside polymer elements. and if so maybe not fully working. but it's easy to fix. you could use https://www.polymer-project.org/docs/elements/core-elements.html#core-collapse

Upvotes: 0

Related Questions