Deedub Deedub - 4 months ago 10
HTML Question

Jquery Not This

How do I hide all other items in a category that are not "this?" Basically am trying to do a simple sort.

When you click on one category, show it and hide all the others.

<nav>
<a href="#">Student</a>
<a href="parent" class="parentbtn">Parent</a>
</nav>
<div class="category student"> Student Form </div>
<div class="category student"> Student Form </div>
<div class="category student"> Student Form </div>
<div class="category student"> Student Form </div>
<div class="category student"> Student Form </div>

<div class="category parent"> Parent Form </div>
<div class="category parent"> Parent Form </div>
<div class="category parent"> Parent Form </div>
<div class="category parent"> Parent Form </div>
<div class="category parent"> Parent Form </div>
<div class="category parent"> Parent Form </div>

$( ".parentbtn" ).click(function() {
$( ".parent" ).not(this).slideUp("slow");

});


codepen: http://codepen.io/anon/pen/MYWpBE

Answer

i made a quick pen with some changes. just switch hide/show to slide.

Now it takes the href in the link, saves it as the name of the filter. On click it hides all divs that not has that class. so if you click "students" it will show all divs that has that class and hide all others.

codepen.io/anon/pen/LEYyPo

$( "a" ).click(function() {
  var filter = this.href;
  $('div').hide();
  $('.'+filter ).show();
});

EDIT: new pen.

Comments