CODEWITHSUNDEEP
javascriptjqueryhtmlcustom-post-type
Krullmizter
Krullmizter

Reputation: 567

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

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!

Upvotes: 0

Views: 322

Answers (2)

valbuxvb
valbuxvb

Reputation: 89

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.

Upvotes: 1

Niklas
Niklas

Reputation: 13145

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.

Upvotes: 0

Related Questions