title: Changing css class in knockout.js on mouse click
body: <p>The knockout.js documentation shows the css binding like this:</p>
  
  <pre><code>&lt;div data-bind="css: { profitWarning: currentProfit() &lt; 0 }"&gt;   
      Profit Information
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to adapt it to change the css class on mouseclick. How can I do this?</p>
  
  <p>Based on answers below, I am using some code like this:</p>
  
  <pre><code>// CSS class to be applied
  &lt;style&gt;
      .bigclass
      {
          width: 200px;
      }
  
  &lt;/style&gt;
  
  // Select list inside a jquery .tmpl
  &lt;script id='criteriaRowTemplate' type='text/html'&gt;
      &lt;tr&gt;
          &lt;td&gt;
              &lt;select data-bind='click: makeBig, css: {bigclass : SelectHasFocus() &gt; 0}' /&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt; 
  
  // Knockout.js Viewmodel
  var CriteriaLine = function() {
      this.SearchCriterion = ko.observable();
      this.SelectHasFocus = ko.observable(0);
  
      // this method is called
      makeBig = function(element) { 
          this.SelectHasFocus(1);            
      };        
  };
  </code></pre>
  
  <p>However, this is not expanding the width of the select list. What am I doing wrong?</p>