title: Knockout toggle active class on click
body: <p>I have a knockout app and within it I have a function which shows/hides elements on the page depending on the selected option. The button that has been selected to activate a particular toggle will have an 'active' class so that it 'stands out' from the others and is clearly visible that that's the selected option. My problem is that I've created a knockout function to toggle the active class but it's triggering the active state on <strong>all</strong> of the buttons rather than the selected button and I'm not sure why?</p>
  
  <pre><code>var viewModel = function(){
      var self = this;
      self.isActive = ko.observable(false);
      self.toggleActive = function(data, event){
          self.isActive(!self.isActive()); //toggle the isActive value between true/false
      }
  }
  
  &lt;button data-bind="click: toggleActive, css : {'activeStyle' : isActive}"&gt;Toggle Active&lt;/button&gt;
  &lt;button data-bind="click: toggleActive, css : {'activeStyle' : isActive}"&gt;Toggle Active&lt;/button&gt;
  &lt;button data-bind="click: toggleActive, css : {'activeStyle' : isActive}"&gt;Toggle Active&lt;/button&gt;
  </code></pre>
  
  <p>Fiddle: <a href="http://jsfiddle.net/amMup/5/" rel="nofollow">http://jsfiddle.net/amMup/5/</a></p>