title: Jquery filter is hiding the div that is inside div
body: <p>I have 2 filters for filering some divs. but when a filter button is pressend the div content is hidden. For a better example i have build a JSFiddle</p>
  
  <p><a href="http://jsfiddle.net/8vwbpLtv/17/" rel="nofollow">JSFiddle</a></p>
  
  <p>Html is :</p>
  
  <pre><code>&lt;!-- Rating  Filter Menu --&gt;
  &lt;h4&gt;&lt;a href="#rating-filter"&gt;Rating&lt;/a&gt;&lt;/h4&gt;
    &lt;div id="rating-filter"&gt;
        &lt;div&gt;
           &lt;ul&gt;
             &lt;li data-stars-id="alls"&gt; &lt;a href="#"&gt;Toate&lt;small class="total"&gt;&lt;/small&gt;&lt;/a&gt; &lt;/li&gt;
             &lt;li data-stars-id="3"&gt; &lt;a href="#"&gt;3 STARS&lt;small class="total-3"&gt;&lt;/small&gt;&lt;/a&gt; &lt;/li&gt;
             &lt;li data-stars-id="4"&gt; &lt;a href="#"&gt;4 STARS&lt;small class="total-4"&gt;&lt;/small&gt;&lt;/a&gt; &lt;/li&gt;
             &lt;li data-stars-id="5"&gt; &lt;a href="#"&gt;5 STARS&lt;small class="total-1"&gt;&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;!-- Board  Filter Menu --&gt;
  &lt;h4&gt;&lt;a href="#board-filter"&gt;Board Type&lt;/a&gt;&lt;/h4&gt;
    &lt;div id="board-filter"&gt;
        &lt;div&gt;
           &lt;ul&gt;
             &lt;li data-board-id="allb"&gt; &lt;a href="#"&gt;Toate&lt;small class="total"&gt;&lt;/small&gt;&lt;/a&gt; &lt;/li&gt;
             &lt;li data-board-id="Half Board"&gt; &lt;a href="#"&gt;Half Board&lt;small class="total-hb"&gt;&lt;/small&gt;&lt;/a&gt; &lt;/li&gt;
             &lt;li data-board-id="Full Board"&gt; &lt;a href="#"&gt;Full Board&lt;small class="total-fb"&gt;&lt;/small&gt;&lt;/a&gt; &lt;/li&gt;
             &lt;li data-board-id="Breakfast"&gt; &lt;a href="#"&gt;Breakfast&lt;small class="total-bb"&gt;&lt;/small&gt;&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
         &lt;/div&gt;
      &lt;/div&gt;
  &lt;!-- End Menu --&gt;
  &lt;!-- Start Listing --&gt;
  &lt;div id="hotel-list" class="hotel-list"&gt;
      &lt;div stars="3" board="Full Board"&gt;&lt;div&gt;Test for 3 Stars / Full Board&lt;/div&gt;3 STARS / FULL BOARD&lt;/div&gt;
    &lt;div stars="3" board="Breakfast"&gt;&lt;div&gt;Test for 3 Stars / Breakfast&lt;/div&gt;3 STARS / BREAKFAST&lt;/div&gt;
    &lt;div stars="4" board="Half Board"&gt;&lt;div&gt;Test for 4 Stars / Half Board&lt;/div&gt;4 STARS / HALF BOARD&lt;/div&gt;
    &lt;div stars="5" board="Full Board"&gt;&lt;div&gt;Test for 5 Stars / Full Board&lt;/div&gt;5 STARS / FULL BOARD&lt;/div&gt;
    &lt;div stars="4" board="Half Board"&gt;&lt;div&gt;Test for 4 Stars / Half Board&lt;/div&gt;4 STARS / HALF BOARD&lt;/div&gt;
    &lt;div stars="5" board="Full Board"&gt;&lt;div&gt;Test for 5 Stars / Full Board&lt;/div&gt;5 STARS / FULL BOARD&lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- End Listing --&gt;
  </code></pre>
  
  <p>jQuery is:</p>
  
  <pre><code>//Rating
  $("#rating-filter li").on("click", function () {
      id = $(this).attr("data-stars-id");
      if (id == "alls") {
          $("div[stars]").show()
      } else {
          $('#hotel-list div').show();
          $('#hotel-list div').filter(function(){
              return $(this).attr('stars') != id
          }).hide();
      }
      return false;
  });
  //Board
  $("#board-filter li").on("click", function () {
      id = $(this).attr("data-board-id");
      if (id == "allb") {
          $("div[board]").show()
      } else {
          $('#hotel-list div').show();
          $('#hotel-list div').filter(function(){
              return $(this).attr('board') != id
          }).hide();
      }
      return false;
  });
  </code></pre>
  
  <p>So the code is filering somehow but it hide the content from the other div that is inside it.</p>