title: Hide and show specific array elements on click w/ Knockout JS
body: <p>In this example, we have a House which has many Rooms, and each Room has many Furnitures in it. I want to be able to give the user the ability to toggle the visibly of each Room's Furnitures (the lists can get very long).</p>
  
  <p>One of the challenges is making sure that the Furniture is visible or not, only for each individual room where they have clicked the button. </p>
  
  <p>Here is a fiddle to play with: <a href="http://jsfiddle.net/gztmq4p6/" rel="nofollow">http://jsfiddle.net/gztmq4p6/</a></p>
  
  <p>My attempt was to, for each Room, have an observable boolean on whether or not the Furnitures were visible. It didn't work, and wasn't giving any errors, either: </p>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>  &lt;tbody data-bind="foreach: rooms"&gt;
      &lt;tr class="well"&gt;
          &lt;td valign="top"&gt;
              &lt;input type="text" data-bind='value: name' /&gt;
               // Added this
              &lt;div&gt; &lt;button class="btn btn-xs btn-info" data-bind='click: toggleFurnitureVisibility'&gt;Toggle Furniture Visibility&lt;/button&gt;
                  &lt;button class="btn btn-xs btn-danger" data-bind='click: $root.removeRoom'&gt;Remove Room&lt;/button&gt;
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td&gt;
              // Added this
              &lt;table data-bind="visible: areFurnituresVisible"&gt;
                  &lt;tbody data-bind="foreach: furnitures"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;input type="text" data-bind='value: name' /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;input type="text" data-bind='value: size' /&gt;
                          &lt;/td&gt;
                          &lt;td&gt;
                              &lt;button class="btn btn-xs btn-danger" data-bind='click: $parent.removeFurniture'&gt;Delete Furniture&lt;/button&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
              &lt;button class="btn btn-success btn-xs" data-bind='click: addFurniture'&gt;Add Furniture&lt;/button&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var Room = function(name, furnitures) {
      var self = this;
      // Default to true
      self.areFurnituresVisible = ko.observable(true);
  
     self.toggleFurnitureVisibility = function (room) {
          if (self.areFurnituresVisible) {
             self.areFurnituresVisible = ko.observable(false);
          } else {
             self.areFurnituresVisible = ko.observable(true);
          }
      };
  
  };
  </code></pre>