CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ani_css
ani_css

Reputation: 2126

Filter for images with jquery

I have categories [sports,naturel,animals] and if I click sports than data-id="sports" img must appear and another data-id must be invisible how can I do that ? in stackoverflow is my codes not appear correctly please click to see on codepen

and my function for this

$(document).ready(function(){

  $(".filter li").on("click",function(){
      var activeId = $(this).attr("id");

  });
});

this is basic how can I improve it ?

Upvotes: 0

Views: 36

Answers (1)

ibrahim mahrir
ibrahim mahrir

Reputation: 31692

$(document).ready(function(){

  // if you want to initially hide all the images then uncomment the following line
  //$("img[data-id]").hide(); 

  $(".filter li").on("click",function(){
      var activeId = $(this).attr("id");

      $("img[data-id]").hide();                      // hide all images that have the attribute data-id
      $("img[data-id = '" + activeId + "']").show(); // show the one with the data-id attribute equal to activeId
  });
});

Upvotes: 1

Related Questions