Google Polymer dynamic removing class - polymer

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:
Add an event handler on click to every buttons;
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>