conditionally-hiding-an-element.html

<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
# Conditionally Hiding an Element

Shows use **conditional boolean attributes** using **?=** syntax.

You can set an element's `hidden` property using `hidden?=`:

    <p hidden?="{{shortView}}">
      ...
    </p>

The boolean attribute gets set if it is bound to a `true` value. Note the
use of `?=` syntax for conditionally setting a boolean attribute.

Read the
[official documentation for conditional attributes]
(http://www.polymer-project.org/docs/polymer/binding-types.html#conditional-attributes).

[jsbin](http://jsbin.com/javot/edit)
-->

<link rel="import" href="../../components/polymer/polymer.html">

<polymer-element name="my-element">
  <template>
   <div>The Big Lebowski</div>
    <p hidden?="{{shortView}}">
      'Dude' Lebowski, mistaken for a millionaire Lebowski, seeks restitution
      for his ruined rug and enlists his bowling buddies to help get it.
    </p>
    <button on-tap="{{toggleView}}">Toggle View</button>
  </template>
  <script>
    Polymer({
      shortView: true,
      toggleView: function() {
        this.shortView = !this.shortView;
      }
    });
  </script>
</polymer-element>