Google Polymer dynamic removing class

Question

I already have this template

<app-drawer-layout>
  <!-- Drawer content -->
  <app-drawer transition-duration="500" swipe-open>
    <div style="width: 100%; height: 100%; position: relative;">
      <div style="height: 100%; width: 100%; overflow: auto;">
        <div id="head-of-drawer-space"></div>
        <div id="controls">
          <paper-button noink on-click="_pageLoader1">
            <div class="menu-item">Load Element 1</div>
          </paper-button>
          <paper-button noink on-click="_pageLoader2">
            <div class="menu-item active">Load Element 2</div>
          </paper-button>
          <paper-button noink on-click="_pageLoader3">
            <div class="menu-item">Load Element 3</div>
          </paper-button>
        </div>
      </div>
    </div>
  </app-drawer>
</app-drawer-layout>

I want to remove an element with 'active' class when one of other button clicked and add 'active' class to the clicked button.

How should I do?

Answer 1

Here is a vanilla Javascript solution that should work with Polymer elements:

1. Add an event handler on click to every buttons;
2. In that callback, for each button, add (or remove) the class to the div inside if it corresponds (or not).

Example:

//select all buttons
var buttons = controls.querySelectorAll( 'paper-button' )   

//attach event handlers
buttons.forEach( function ( button ) 
{
    button.onclick = toggle
} )

//add or remove class to every buttons
function toggle ()
{
    buttons.forEach( function ( button )
    {
        var cl = button.querySelector( 'div' ).classList
        if ( this == button )
            cl.add( 'active' )
        else
            cl.remove( 'active' )
    }, this )
}

You can get the same result with arrow functions:

//select all buttons
var buttons = controls.querySelectorAll( 'paper-button' )	

//attach event handlers
buttons.forEach( b => b.onclick = function ()
{
  //add or remove class to every buttons
  buttons.forEach( b => b.querySelector( 'div' ).classList[ this==b ?"add":"remove"]( 'active' ) )
} )

div.active {
  color: red ;
}

<div id="controls">
	<paper-button noink on-click="_pageLoader1">
		<div class="menu-item">Load Element 1</div>
	</paper-button>
	<paper-button noink on-click="_pageLoader2">
		<div class="menu-item active">Load Element 2</div>
	</paper-button>
	<paper-button noink on-click="_pageLoader3">
		<div class="menu-item">Load Element 3</div>
	</paper-button>
</div>