Gallery filtering

Beginners
3

Hey @kat,
@droidgoo is correct about having to use JS for either Bootstrap or Foundation. It comes down to your choice between the two frameworks because the set-up is the same for both.

  1. Put together your filtering buttons, each should have a data attribute like data-filter that corresponds to the particular images you want displayed, as well as a common class like filter-button.
  2. Next, put together a flexbox grid of your pictures. Each should have two classes, one that is common to all to identify them as a gallery item, like filter-item and one for the filter term, like animals.
  3. Then you need to add JavaScript, either to the page or with a separate file. The script should target each button through the filter-button class and add a click listener. The click listener function should read the data-filter attribute of the button and then adjust the visibility of the appropriate images - either hiding them or making them appear.
    Here is a CodePen link. It uses Foundation and jQuery.