Elements filter Javascript issue. please guide

#1

Link:

Guys, if you visit this link here i tried to make the elements filter.
if you click any button after clicking the show all button.
The animation disappears . I can see the problem is with JavaScript but am unable to solve it.

Please help.
Thanks

#2

it is due to the fact that the page is not rendering any new squares, simply removing excess ones. If you click on liquor for example, then focus on one of the squares that is in liquor while you press show all, only the liquor squares do not have the animation. You may want to clear the page before each render to consistently get the animation.

#3

I tinkered a lot with your code, and it got completely rewritten, so sorry about that. When I put a setTimeOut on the part where you are adding the “show” class, I guess that minimal delay is forcing a rerender in the browser and it works fine,

const cards = document.querySelectorAll(".imgDiv");

filterSelection("all");

function filterSelection(para) {
  
  if (para == "all") {
    para = 'imgDiv';
  };

  cards.forEach( card => {
    
    card.classList.remove('show');
    
    if (card.classList.contains(para)) {    
      setTimeout( function() {
        card.classList.add('show')
      }, 100);
    };
  });
};

It isn’t ideal of course. Alternatively you can give an InnerHTML value of “” to all the elements you want to hide, but it requires even more tinkering, and isn’t ideal either., and bad for performance. It would be a good question that what is a best practice in this case…