CODEWITHSUNDEEP
javascripthtmlpolymerweb-component
TrojanMorse
TrojanMorse

Reputation: 642

Toggling between two divs using Polymer

I ran into a issue where using polymer I would like to toggle through two divs, the problem I have is, I want to use the polymer standard of toggling where they use: hidden?="{{toggleMe}}" as a attribute on the div and just bind it then make a function that would do the toggling or the show/hide that will look like this:

<div hidden?="{{divOne}}">TEST</div>
<div hidden?="{{divTwo}}">TEST2</div>

<a on-tap="{{change}}">Toggle</a>

<script>
Polymer('componentName',{
  change: function(){
   this.divOne = !this.divOne;
   this.divTwo = !this.divTwo;
  }
})
</script>

This above will show both and hide both together, I want the one displayed and the other hidden, So essentially switching between the two while starting with the one hidden and the other active, and then swapping states from there.

I tried this also with no luck as I can't do this or use the '!' on the left hand side: 

!this.divOne = this.divOne;
this.divTwo = !this.divTwo;

Thanks for reading

Upvotes: 0

Views: 264

Answers (2)

TrojanMorse
TrojanMorse

Reputation: 642

I have found a fix to the question, i assigned true and false values to the bind hidden values before I used them (this assigns a true for hidden state and false for the separate values), Then when clicking on the toggle bind I just used the code of @Zikes to have the toggle work(thanks for that).

current working code

<div hidden?="{{divOne}}">TEST</div>
<div hidden?="{{divTwo}}">TEST2</div>

<a on-tap="{{change}}">Toggle</a>

<script>
Polymer('componentName',{
  divOne: false,
  divTwo:true,
  change: function(){
   this.divOne = !(this.divTwo = this.divOne);
  }
})
</script>

Hope this can help clear someone in the future

Upvotes: 0

Zikes
Zikes

Reputation: 5886

this.divOne = !(this.divTwo = this.divOne);

Upvotes: 1

Related Questions