I'm making a menu if someone clicks on one object it should filter all of them accordingly (i.e: all projects, pleted projects a.s.o. I have a jQuery to take care of this like this (I added the .not() recently, before adding it this script worked):

$("#pleted").click(function(){
 $('.project_wrapper[data-category="pleted_projects"]').not(this).hide();
});

I have figured out that I should use .not() to .hide all objects that don't have the given [data-category] or am I doing this wrong?

Edit

The HTML:

The Menu:

<ul class="project_menu>
 <li id="plete">Completed Projects</li>
</ul>

The Projects:

<div class="project_wrapper" data-category="pleted_projects">The projects</div>

Edited a bit myself but here is the final jQuery code I've got:

jQuery(document).ready(function($){

 // Show all
 $("#all").click(function(){
   $(".project_wrapper").show();
 });

 // Complete
 $("#plete").click(function(){
   $(".project_wrapper:not([data-category='pleted_projects'])").hide();
   $(".project_wrapper[data-category='pleted_projects']").show();
 });

});

Update

Instead of using .show and .hide I used .css("visibility", "collapse") & .css("visibility", "visible") show and hide seemed to bug out for me in WordPress.

I'm making a menu if someone clicks on one object it should filter all of them accordingly (i.e: all projects, pleted projects a.s.o. I have a jQuery to take care of this like this (I added the .not() recently, before adding it this script worked):

$("#pleted").click(function(){
 $('.project_wrapper[data-category="pleted_projects"]').not(this).hide();
});

I have figured out that I should use .not() to .hide all objects that don't have the given [data-category] or am I doing this wrong?

Edit

The HTML:

The Menu:

<ul class="project_menu>
 <li id="plete">Completed Projects</li>
</ul>

The Projects:

<div class="project_wrapper" data-category="pleted_projects">The projects</div>

Edited a bit myself but here is the final jQuery code I've got:

jQuery(document).ready(function($){

 // Show all
 $("#all").click(function(){
   $(".project_wrapper").show();
 });

 // Complete
 $("#plete").click(function(){
   $(".project_wrapper:not([data-category='pleted_projects'])").hide();
   $(".project_wrapper[data-category='pleted_projects']").show();
 });

});

Update

Instead of using .show and .hide I used .css("visibility", "collapse") & .css("visibility", "visible") show and hide seemed to bug out for me in WordPress.

• javascript
• jquery
• html

• 2 It would help to see your actual HTML too – Rory McCrossan Commented Dec 17, 2018 at 8:57

2 Answers 2

The below code will hide all the project_wrapper div with data-category not equal to "pleted_projects" and will show the project_wrapper div with data-category equal to "pleted_projects"

$(".project_wrapper:not([data-category='pleted_projects'])").hide();
$(".project_wrapper[data-category='pleted_projects']").show();

I believe what you're asking is to hide all elements within .project_wrapper except for the .project_wrapper[data-category="pleted_projects"] element. In that case I believe you can do this

$('.project_wrapper *').not('.project_wrapper[data-category="pleted_projects"').hide()​;

Or if you want to remove everything in the body

$('body *').not('.project_wrapper[data-category="pleted_projects"').hide()​;

This will remove all elements within .project_wrapper or body, subtract the one with the correct data-category, and then hide all the others.

Source