title: Knockout.js: Toggling Visibility Of Multiple Dom Elements Using Multiple Buttons
body: <p>I have a js fiddle (<a href="http://jsfiddle.net/Halcyon/jqL45/" rel="nofollow">located here)</a> that I want to mimic using knockout.js. The idea is that each button has a corresponding div tag. If the corresponding div tag is visible, it should hide when the button is clicked. Otherwise, it should show. If any of the other non-corresponding divs are visible, they should hide and then show the corresponding div. How can I mimic this jQuery version using knockout? The js fiddle for the knockout version is <a href="http://jsfiddle.net/Halcyon/A7XY3/2/" rel="nofollow">located here</a>. It works but it still seems really verbose. It seems like there should be a way to make it more dynamic and reduce the amount of work. Any help is greatly appreciated.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .text { background-color: lightgray; }
  &lt;/style&gt;
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
          var viewModel = {
              showHide1: ko.observable(false),
              showHide2: ko.observable(false),
              showHide3: ko.observable(false),
              toggle1: function () {
                  this.showHide1(true);
                  this.showHide2(false);
                  this.showHide3(false);
              },
              toggle2: function () {
                  this.showHide1(false);
                  this.showHide2(true);
                  this.showHide3(false);
              },
              toggle3: function () {
                  this.showHide1(false);
                  this.showHide2(false);
                  this.showHide3(true);
              }
          };
  
          ko.applyBindings(viewModel);
      });
  &lt;/script&gt;
  
  &lt;div id="text1" class="text" data-bind="if: showHide1"&gt;Text 1&lt;/div&gt;
  &lt;div id="text2" class="text" data-bind="if: showHide2"&gt;Text 2&lt;/div&gt;
  &lt;div id="text3" class="text" data-bind="if: showHide3"&gt;Text 3&lt;/div&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;button id="button1" type="button" data-bind="click: toggle1"&gt;Button 1&lt;/button&gt;
  &lt;button id="button2" type="button" data-bind="click: toggle2"&gt;Button 2&lt;/button&gt;
  &lt;button id="button3" type="button" data-bind="click: toggle3"&gt;Button 3&lt;/button&gt;
  </code></pre>