jQuery Filter divs By Class

Question

I'm trying to filter divs by their class, but I'm having some trouble. For some reason, if any button is pressed, everything disappears. I've been troubleshooting this for a while now and I can't figure out why this is happening. A CodePen is here and my attempt is below:

HTML:

<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="a b">a &amp; b</div>
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>

CSS:

div {
  background: #eee;
  height: 100px;
  width: calc(25% - 10px);
  float: left;
  margin: 5px;
  text-align: center;
}
.active {
  color: red;
}

jQuery:

$( document ).ready(function() {

  $("#all").click(function() {
    $("div").fadeIn(500);
    $("#all").addClass("active");
    $(":not(#all)").removeClass("active");
  });
  $("#a").click(function() {
    $(".a").fadeIn(500);
    $(":not(.a)").fadeOut(0);
    $("#a").addClass("active");
    $(":not(#a)").removeClass("active");
  });
  $("#b").click(function() {
    $(".b").fadeIn(500);
    $(":not(.b)").fadeOut(0);
    $("#b").addClass("active");
    $(":not(#b)").removeClass("active");
  });
  $("#c").click(function() {
    $(".c").fadeIn(500);
    $(":not(.c)").fadeOut(0);
    $("#c").addClass("active");
    $(":not(#c)").removeClass("active");
  });
  $("#d").click(function() {
    $(".d").fadeIn(500);
    $(":not(.d)").fadeOut(0);
    $("#d").addClass("active");
    $(":not(#d)").removeClass("active");
  });

});

Answer 1

It is because of the selector $(":not(.b)") which selects all elements and hides it except .b which will include the body element also.

You need to use a more specific selector, one option is to use a container element like

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#ct > div').show();
  } else {
    var $el = $('.' + this.id).show();
    $('#ct > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div id="ct">
  <div class="a b">a &amp; b</div>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="d">d</div>
</div>

---

Using a common selector like an element selector div also may not work as it could target other non related elements, so another option is to use a common class to all elements that need to be targeted.

var $items = $('.item');
var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $items.show();
  } else {
    var $el = $('.' + this.id).show();
    $items.not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');
})

.active {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="active btn" id="all">Show All</button>
<button class="btn" id="a">Show A</button>
<button class="btn" id="b">Show B</button>
<button class="btn" id="c">Show C</button>
<button class="btn" id="d">Show D</button>
<br />
<div class="item a b">a &amp; b</div>
<div class="item a">a</div>
<div class="item b">b</div>
<div class="item c">c</div>
<div class="item d">d</div>

Note: Also as you can see, there is no need to write separate click handlers for each button - given that the id of the button and the class you are looking for is the same.