# Gallery filtering

**URL:** <https://forum.pinegrow.com/t/gallery-filtering/4394>\
**Category:** Beginners\
**Created:** [July 31, 2020, 8:11pm UTC](https://forum.pinegrow.com/t/gallery-filtering/4394 "2020-07-31T20:11:35Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![RobM](https://avatars.discourse-cdn.com/v4/letter/r/278dde/32.png) [@RobM](https://forum.pinegrow.com/u/RobM)\
**Post date:** [August 1, 2020, 11:49am UTC](https://forum.pinegrow.com/t/gallery-filtering/4394/3 "2020-08-01T11:49:47Z")

</div>

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.](https://codepen.io/BoDonkey/pen/YzwmYzL) It uses Foundation and jQuery.

---

_[View the full topic](https://forum.pinegrow.com/t/gallery-filtering/4394)._