how to hide drop down list in poymer-js

Question

I need to hide dropdown-menu. i tried .hidden property but it is not working

<paper-dropdown-menu id="firmChannelFilter" hidden="${(this._channelFilterVisibility)}" 
             class="small-padding" label="Channel Filter">
             <paper-listbox slot="dropdown-content" 
             .hidden="${(this._channelFilterVisibility)}" id="firmChannel"

Answer 1

You should be able to set the hidden property as follows:

hidden$="[[_channelFilterVisibility(valueThatChanges)]]"

1. If you hide the paper-dropdown-menu, it will automatically hide the paper-listbox because it is a nested element.
2. If you are changing a non-polymer-specific attribute/property, you need to add a $ before the =, i.e. class$="[[_colour(obj.Active)]]" or class$="[[_selectedColour(selectedFilter)]]" or the hidden attribute.
3. You don't need the this quantifier - Polymer already knows and interprets anything you use between [[]] or {{}} as belonging to this.
4. You have to pass in a property to the function, otherwise it will only ever call once on page/element load. If you pass in a property that changes, i.e. a filter property, Polymer will call the function every single time that property value changes.
5. The attribute is hidden, not .hidden in the paper-listbox.
6. {{}} is used for two-way binding, normally used when you are interacting with something that displays and sets a value, such as your paper-listbox. [[]] is single-way binding, normally used when something is only taking in a value.

At the end of the day, your html code should look something like this:

<paper-dropdown-menu id="firmChannelFilter"
                     hidden$="[[_channelFilterVisibility(filterProperty)]]"
                     class="small-padding"
                     label="Channel Filter">
  <paper-listbox slot="dropdown-content"
                 class="dropdown-content"
                 id="firmChannel"
                 selected="{{selectedIdString}}"
                 attr-for-selected="id">
    <paper-item id="A">Item A</paper-item>
    <paper-item id="B">Item B</paper-item>
    <paper-item id="C">Item C</paper-item>
  </paper-listbox>
</paper-dropdown-menu>

Briefly, this is a dropdown menu that has 3 items: Item A, Item B and Item C. When you select one of them it will set the value of this.selectedIdString to the string "A", "B", or "C". When the value of this.filterProperty changes, the function this._channelFilterVisibility will be called with the new value as the passed in parameter.