Show/hide content depending on its data-* attribute with jQuery

Question

I'm creating a website in WordPress and I'm using the Toolset plugin (Custom fields & post types) to create projects that I display on a project page. All the projects that I create have a category assigned to them (ex. Complete projects, Ongoing projects), then I have menu objects displaying all categories like "All Projects", "Completed Projects" in a row.

I want to be able to display the projects that I have created according to which menu object/name you click on, so all the completed projects should appear when the user clicks on ex. "Completed Projects", Ongoing Projects a.s.o.

This is the div that gets the data-category dynamically assigned to it (so when I create a project and adds a category to it, it gets added to it):

<div class="project_wrapper" data-category="[wpv-post-taxonomy type='category' format='slug']"> <!-- The project code --> </div>

This is then the list of menu objects that the user can click on:

<div class="project_menu">
 <ul>
  <li id="all" class="objects">All Projects</li>
  <li id="complete" class="objects">Completed Projects</li>
 </ul>
</div>

This is then the jQuery that should .hide or .show the corespondig projects depending if the data-type that is passed trought it.

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

 // Show all projects
 $("#all").click(function(){
  $('.project_wrapper[data-category=show-all]').show();
 });

 // Complete projects
 $("#complete").click(function(){
   $('project_wrapper[data-category=complete]').show();
 });

});

This is not working at the moment. If I have the parent of the project-wrapper set to display .show and/or .hide it works just fine, but when I pass the data-* through the jQuery it doesn't change anything. I'm fairly new to JavaScript and jQuery so sorry if it's a mess. Thanks!

If you want to show all items that have a data-category=, then use $("[data-category]") - otherwise I can't see how data-category=complete relates in anyway to data-category="[wpv-post-taxonomy type='category' format='slug']" — fdomn-m
– fdomn-m, Commented Dec 14, 2018 at 12:03

score 1 · Accepted Answer · 2019-02-12 09:54:12Z

1

Perhaps adding quotation marks is going to fix it.

jQuery(document).ready(function($){
    // Show all projects
    $("#all").click(function(){
        $('.project_wrapper[data-category="show-all"]').show();
    });

    // Complete projects
    $("#complete").click(function(){
        $('.project_wrapper[data-category="complete"]').show();
    });
});

Are the elements hidden to start with? If yes how?

.show() is roughly equivalent to calling .css( "display", "block" )

BUT

If using !important in your styles, such as display: none !important, .show() will not override !important

So it would be useful to understand what the CSS is like before the function is called.

edited Feb 12, 2019 at 9:54

answered Dec 14, 2018 at 11:12

user6420561

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

2 Comments

Krullmizter Over a year ago

Thanks had forgotten that.. But it still dosen't work.

Krullmizter Over a year ago

Yes, I did with the help of this and other threads. Sorry, I forgot to answer it.

Niklas · Accepted Answer · 2018-12-14 12:24:00Z

0

This should work for you, if I've understood your question:

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

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

 // Complete projects
 $("#complete").click(function(){
  $(".project_wrapper").hide();
  $(".project_wrapper[data-category*='completed']").show();
 });

});

You were missing a dot in your complete function and I guess you also need to hide all classes before showing only the completed ones.

Here's a jsfiddle that you can try with.

answered Dec 14, 2018 at 12:24

Niklas

13.2k24 gold badges82 silver badges124 bronze badges

Collectives™ on Stack Overflow

Show/hide content depending on its data-* attribute with jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related