title: Filter divs contained in another div
body: <p>I'm trying to make a filter in my html page, to filter contenent generated by a javascript function.
  I have a div "divname" that is filled with content loaded by a mySql database from a php code called in the javascript function.
  I'm using bootstrap framework and from the javascript I create one bootstrap column for each database element that i have to display. I want to filter this content and i want that some columns to appear and disappear depending on a checkbox filter. I'm trying with the .js function 'setAttribute' to set an ID to the columns and i would filter this columns by this id content.</p>
  
  <p>e.g.
  column.setAttribute('id', 'chair') --> i want that the checkbox filter shows me all the chairs contained in the div id="furniture"</p>
  
  <p>I'm trying to do this but I'm not able to tell the filter that "furniture" has divs inside and the filter should look inside this div and show visible or not visible his elements.</p>
  
  <p>Thanks for the help!</p>
  
  <p>EDIT:</p>
  
  <p>my js function called by the filter</p>
  
  <pre><code>$(function(){
      $("#filters a").click(function() {
          $("#furniture").find("." + this.id).toggle();   
      });
    });
  </code></pre>
  
  <p>my filters:</p>
  
  <pre><code>&lt;div id="filters"&gt;    
      &lt;a href="#" id="chair"&gt;Filter chair&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my html page:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Furnitures&lt;/title&gt;
  
           &lt;link rel="shortcut icon" href="images/fav.ico" type="image/x-icon" /&gt;
  
          &lt;!-- Mobile viewport optimized --&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
  
          &lt;!-- Bootstrap CSS --&gt;
          &lt;link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"&gt;
          &lt;link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet"&gt;
          &lt;link href="includes/css/bootstrap-social.css" rel="stylesheet"&gt;
          &lt;link rel="stylesheet" href="includes/font-awesome/css/font-awesome.min.css"&gt;
  
          &lt;!-- Custom CSS --&gt;
          &lt;link rel="stylesheet" href="includes/css/styles.css"&gt;
          &lt;script src="includes/js/modernizr-2.6.2.min.js"&gt;&lt;/script&gt;
  
      &lt;/head&gt;
      &lt;body&gt;
  
          &lt;div id="navbar"&gt;&lt;/div&gt;
  
              &lt;div class="row top-buffer-from-navbar"&gt;
                   &lt;div id="furniture"&gt;&lt;/div&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;footer id="footer"&gt;&lt;/footer&gt;
  
      &lt;script src="http://code.jquery.com/jquery.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;window.jQuery || document.write('&lt;script src="includes/js/jquery-1.8.2.min.js"&gt;&lt;\/script&gt;')&lt;/script&gt;
  
      &lt;!-- Bootstrap JS --&gt;
      &lt;script src="bootstrap/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Custom JS --&gt;
      &lt;script src="includes/js/script.js"&gt;&lt;/script&gt;
      &lt;script src="includes/js/loadFurnitures.js"&gt;&lt;/script&gt;
      &lt;script src="includes/js/filter.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function(){
              $("#footer").load("footer.html");
          });
      &lt;/script&gt;
      &lt;script&gt;
          $(function(){
              $("#navbar").load("navbar.html");
          });
      &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>this my load furnitures js</p>
  
  <pre><code>function ready(){
  
      var idprodotti=1;
  
      $.ajax({
          method: "POST",
          crossDomain: true,
          url: "includes/php/getFurniture.php",
          data: {furniture:idprodotti},
          success: function(response) {
              var furniture=JSON.parse(response);
              var i=0;   
  
              var myParam = location.search.split('category=')[1];
  
              var container = document.getElementById("furniture");
  
              var panel = document.createElement("div");
              panel.setAttribute("class", "panel");
              var panelHeading = document.createElement("div");
              panelHeading.setAttribute("class", "panel-heading");
              var panelTitle = document.createElement("h4");
              var panelContenent = document.createElement("div");
              panelContenent.setAttribute("class", "col-sm-12 feature");
  
              panelTitle.appendChild(document.createTextNode("furniture"));
  
              panelHeading.appendChild(panelTitle);
              panel.appendChild(panelHeading);
  
              var row = document.createElement("div");
              row.setAttribute("class", "row");
  
  
              for(i=0;i&lt;furniture.length;i++) {
  
  
                      var urlFurniture = "furniture.html?furniture=" +furniture[i].id;
  
                      var img = document.createElement("img");  
                      var urlImmagine = "images/furniture/" + furniture[i].immagine;
                      img.setAttribute('src', urlImmagine);
                      img.setAttribute('class', 'img-responsive');
  
                      var name = document.createElement("h4");
                      var nameTemp = document.createTextNode(furniture[i].nome);
                      name.appendChild(nameTemp);
  
                      var button = document.createElement("a");
                      button.setAttribute('class', 'btn btn-smsll btn-default');
                      button.setAttribute("href", urlProdotto);
                      var buttonLabel = document.createTextNode("Scopri");
                      button.appendChild(buttonLabel);
  
                      var price = document.createElement("h4");
                      var priceTemp = document.createTextNode(furniture[i].prezzo+ "\u20AC");
                      price.appendChild(priceTemp);
  
                      var showedFurniture = document.createElement("div");
                      showedFurniture.setAttribute("class", "col-sm-4 feature");
  
                      showedFurniture.setAttribute("type", furniture[i].category);
  
                      var showedFurniturePanel = document.createElement("div");
                      showedFurniturePanel.setAttribute("class", "panel text-center");
  
                      var showedButton = document.createElement("div");
                      showedButton.setAttribute("class", "row");
                      showedButton.appendChild(button);
  
  
                      showedFurniturePanel.appendChild(img);
                      showedFurniturePanel.appendChild(name);
                      showedFurniturePanel.appendChild(price);
                      showedFurniturePanel.appendChild(showedButton);
  
                      showedFurniture.appendChild(showedFurniturePanel);
  
                      panelContenent.appendChild(showedFurniture);  
  
  
                  row.appendChild(panelContenent);
                  panel.appendChild(row);
                  container.appendChild(panel);
              }   
          },
          error: function(request,error) 
          {
              console.log("Error");
          }
      });
  
  }
  $(document).ready(ready);
  </code></pre>
  
  <p>I want to filter each showedFurniture by his category "chair" or "table"</p>