title: how to close one panel when opening another using Polymer
body: <p>I have an iron-list in which I have a settings icon which, when clicked causes a panel to slide out with settings options in. However when I have one open, I am wanting it to close upon opening the panel for another row. Currently I have it where they can all be open at the same time which is not optimal.</p>
  
  <p>Please see the gif for the problem I am facing.<br><br>
  GIF OF THE PROBLEM <br>
  <a href="https://i.stack.imgur.com/bKrVv.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bKrVv.gif" alt="enter image description here"></a></p>
  
  <p><strong>HTML/Polymer</strong></p>
  
  <pre><code>&lt;div class="container horizontal layout"&gt;
     &lt;div class="settingsIconContainer"&gt;
         &lt;paper-icon-button class="settingIcon" icon="settings" on-click="toggleSettings"&gt;&lt;/paper-icon-button&gt;
      &lt;/div&gt;
      &lt;div id="edit" class="settings"&gt;
          &lt;paper-icon-button icon="delete"&gt;&lt;/paper-icon-button&gt;
          &lt;paper-icon-button icon="create"&gt;&lt;/paper-icon-button&gt;
          &lt;paper-icon-button icon="clear" on-click="toggleSettings"&gt;&lt;/paper-icon-button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Polymer JS</strong></p>
  
  <pre><code>toggleSettings : function(e) {
      this.$.edit.classList.toggle('settingsMove');
  },
  </code></pre>