Hide all elements except the given data-* attribute with jQuery

Question

I'm making a menu if someone clicks on one object it should filter all of them accordingly (i.e: all projects, completed 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):

$("#completed").click(function(){
 $('.project_wrapper[data-category="completed_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="complete">Completed Projects</li>
</ul>

The Projects:

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

Edit Got it working thanks to @Nitha & @Sam Hollenbach thanks!

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
 $("#complete").click(function(){
   $(".project_wrapper:not([data-category='completed_projects'])").hide();
   $(".project_wrapper[data-category='completed_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.

It would help to see your actual HTML too

Rory McCrossan
– Rory McCrossan

2018-12-17 08:57:12 +00:00
Commented Dec 17, 2018 at 8:57 — Rory McCrossan
– Rory McCrossan, Commented Dec 17, 2018 at 8:57

Nitha · Accepted Answer · 2018-12-17 09:05:27Z

6

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

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

answered Dec 17, 2018 at 9:05

Nitha

6905 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Krullmizter Over a year ago

Thank you for this, I'm new to jQuery so this was very helpful.

Sam Hollenbach · Accepted Answer · 2018-12-17 09:46:08Z

3

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

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

Or if you want to remove everything in the body

$('body *').not('.project_wrapper[data-category="completed_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

edited Dec 17, 2018 at 9:46

answered Dec 17, 2018 at 9:07

Sam Hollenbach

6724 silver badges21 bronze badges

1 Comment

Krullmizter Over a year ago

Thank you for your post

Collectives™ on Stack Overflow

Hide all elements except the given data-* attribute with jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related