Apply Css on button click

Webix JS
#1

Hi,

I am using below css to apply Active and Inactive css to two buttons. on page load one button will be active and another button InActive.

.buttonactive button {
             color: white;font: bold;
             background-color:#39373e;
             border-radius: 5px;
         }

         .buttonInactive button{
             color: white;font: bold;
             background-color:#adaaaf;
             border-radius: 5px;
         }

using below code on page load.
//set CSS

webix.html.addCss($$("btnApps").getNode(), "buttonactive");
webix.html.addCss($$("btnTitles").getNode(), "buttonInactive");

Up to here Css are applying correctly.

When i click on second button, “active” css should apply and another button should apply “inactive” css. but is not working for me?

 {view: "button", id:"btnApps", value: "Apps", width: 205, height: 35, click: "getApps();" },

 { view: "button", id:"btnTitles", value: "Titles", width: 205, height: 35, click: "getTitles();" },

function getApps() {
    webix.html.addCss($$("btnTitles").getNode(), "buttonInactive");
    webix.html.addCss($$("btnApps").getNode(), "buttonactive");
}

function getTitles() {
   webix.html.addCss($$("btnTitles").getNode(), "buttonactive");
   webix.html.addCss($$("btnApps").getNode(), "buttonInactive");
}

https://snippet.webix.com/k9oj9wpu

#2

Hello,

Maybe it’s better to use disable() ?

Please check the sample: Code Snippet