Смена класса при нажатии и повторном нажатии на кнопку

Здравствуйте!

Вопрос по Яндекс Мап Апи

Имеется меню с фильтрами иконок. Нужно, чтобы при клике на иконку задний фон у иконки менял цвет, а при повторном клике - цвет становился исходным. Так сказать, положения: иконка выбрана и иконка не выбрана. Находил несколько вариантов, остановился на смене класса при клике, но все это не работает. Не могу понять причины и как это можно сделать...

Собственно, классы

#map {
    margin: 0px auto 0px auto;
    width: 100%;
    height: 600px;
    border: 2px solid black;
}
.sidebar {
    background-color: #210672;
    width: 160px;
    height: 100px;
    border-radius: 10px;
}
.click {
     background-color: #fff;
     width: 33%;
    height: 50%;
    float: left;
    cursor: pointer;
}
.show_icon {
     background-color: #FFD500;
    width: 33%;
    height: 50%;
    float: left;
    cursor: pointer;
}

И попытки реализации

1

var map, objectManager, layerName = "user#layer"; ymaps.ready(onReady);

function onReady () {
    setupLayer();
    setupSidebar();
    spisok ();
    setupMap();
    setupPresets();
    setupPlaces();
}
function setupLayer () {
    var Layer = function () {
        var layer = new ymaps.Layer("./%z/%x-%y.png", {
            //tileTransparent: true,
            notFoundTile: "./2/3-0.png"
        });
        layer.getZoomRange = function () {
            return ymaps.vow.resolve([0, 4]);
        };
        layer.getCopyrights = function () {
            return ymaps.vow.resolve("");
        };
        return layer;
    };
    ymaps.layer.storage.add(layerName, Layer);
    var mapType = new ymaps.MapType(layerName, [layerName]);
    ymaps.mapType.storage.add(layerName, mapType);
}
 $(document).ready(function(){
    $('show_icon').click(function () {
        $(this).toggleClass('click');
        });
    });
function setupSidebar () {
    var layoutClass = ymaps.templateLayoutFactory.createClass(
        "<div class=sidebar>" +
            "<div class=show_icon id=show_Granata></div>"+
            "<div class=show_icon id=show_Pistolet></div>" +
            "<div class=show_icon id=show_health></div>"+
            "<div class=show_icon id=show_Bita></div>"+
        "</div>"

и 2 - попытка реализации только на одном элемменте

var map,
    objectManager,
    layerName = "user#layer";
ymaps.ready(onReady);
function onReady () {
    setupLayer();
    setupSidebar();
    spisok ();
    setupMap();
    setupPresets();
    setupPlaces();
}
function setupLayer () {
    var Layer = function () {
        var layer = new ymaps.Layer("./%z/%x-%y.png", {
            //tileTransparent: true,
            notFoundTile: "./2/3-0.png"
        });
        layer.getZoomRange = function () {
            return ymaps.vow.resolve([0, 4]);
        };
        layer.getCopyrights = function () {
            return ymaps.vow.resolve("");
        };
        return layer;
    };
    ymaps.layer.storage.add(layerName, Layer);
    var mapType = new ymaps.MapType(layerName, [layerName]);
    ymaps.mapType.storage.add(layerName, mapType);
}
function setupSidebar () {
    var layoutClass = ymaps.templateLayoutFactory.createClass(
        "<div class=sidebar>" 
            "<div class=show_icon id=show_Granata onclick=this.className = 
              "+
            "(this.className == 'show_icon' ? 'click' : 'show_icon')>
         </div>"+
            "<div class=show_icon id=show_Pistolet></div>" +
            "<div class=show_icon id=show_health></div>"+
            "<div class=show_icon id=show_Bita></div>"+
        "</div>" 

Естественно дальше идет код и все кнопки реализованы в function setupMap ()

Сами кнопки работают, но вот как их выделить?... Долго уже мучаюсь, были еще варианты, но эти чисто для наглядности..

jquery Тоже подключен, если это важно

Спасибо!