# Use Filters inside the items themselves

**URL:** <https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947>\
**Category:** Attributes\
**Created:** [September 22, 2023, 9:28am UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947 "2023-09-22T09:28:07Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![pablo.faust](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/pablo.faust/32/1745_2.png) [@pablo.faust](https://forum.finsweet.com/u/pablo.faust)\
**Post date:** [September 22, 2023, 9:28am UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/1 "2023-09-22T09:28:07Z")

</div>

Hi,

I’m building an index of projects. Each project has a name and a variety of categories. Each project is displayed in line with its name and its categories.

What I’m trying to achieve is to be able to **filter the list by using the categories WITHIN the list itself**.

Here’s my initial set up: [Webflow - Tests Studio Format](https://preview.webflow.com/preview/tests-studio-format?utm_medium=preview_link&utm_source=designer&utm_content=tests-studio-format&preview=ce9327f0e96586e3cc4bcad460a88cc5&workflow=preview)

But of course, for now, only the categories of the first project work as filters.

Do you think there would be any work around to achieve this?

Thanks!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 22, 2023, 11:05am UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/2 "2023-09-22T11:05:32Z")

</div>

Hey @pablo.faust! This happens because you can’t have more than 1 form per filter instance, as you have a form per item only the first one will work.

One thing that we can try, which is a little bit hacky, is to have a hidden form with the actual filters and set some custom mirror clicking so you can select the categories from within the list, and these check/uncheck the hidden filter elements.

I can not guarantee this will work but it could be an idea to build from.

---

<div class="post-metadata">

**Author:** ![pablo.faust](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/pablo.faust/32/1745_2.png) [@pablo.faust](https://forum.finsweet.com/u/pablo.faust)\
**Post date:** [September 22, 2023, 2:11pm UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/3 "2023-09-22T14:11:55Z")

</div>

> [@Support-Luis](#):
>
> mirror clicking

That looks like a not-so-easy but great idea! I’ll have a try.

Thanks!

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 22, 2023, 2:55pm UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/4 "2023-09-22T14:55:23Z")

</div>

let me know how it goes! 💪

---

<div class="post-metadata">

**Author:** ![pablo.faust](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/pablo.faust/32/1745_2.png) [@pablo.faust](https://forum.finsweet.com/u/pablo.faust)\
**Post date:** [September 22, 2023, 3:18pm UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/5 "2023-09-22T15:18:20Z")

</div>

It worked quite well!  
[https://tests-studio-format.webflow.io/](https://tests-studio-format.webflow.io/)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [September 22, 2023, 3:21pm UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/6 "2023-09-22T15:21:12Z")

</div>

Let’s go! That works awesome! 💪

---

<div class="post-metadata">

**Author:** ![pablo.faust](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/pablo.faust/32/1745_2.png) [@pablo.faust](https://forum.finsweet.com/u/pablo.faust)\
**Post date:** [October 4, 2023, 5:51pm UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/7 "2023-10-04T17:51:23Z")

</div>

Hi again!

I implemented it on the actual website, and I get a very odd behaviour. The first click on a Service is fine, but then if you try to refilter the list by Service, the output seems totally random.

Do you understand why?

Live: [Projets](https://studio-format.webflow.io/projets)  
Read-Only: [Webflow - Studio Format](https://preview.webflow.com/preview/studio-format?utm_medium=preview_link&utm_source=designer&utm_content=studio-format&preview=cf4a4b53cc3c76b46f8b7df3d31eb644&pageId=651d8b9d9b9d98d1f97e0294&workflow=preview)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [October 5, 2023, 10:22am UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/8 "2023-10-05T10:22:23Z")

</div>

Hey @pablo.faust! This could be because of the active filters already being applied, as you are using checkboxes these filters stack on top of each other.

Could you add an active class to any filter UI to see which filters are being considered?

---

<div class="post-metadata">

**Author:** ![pablo.faust](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/pablo.faust/32/1745_2.png) [@pablo.faust](https://forum.finsweet.com/u/pablo.faust)\
**Post date:** [October 5, 2023, 12:51pm UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/9 "2023-10-05T12:51:08Z")

</div>

Thanks for the answer! The reason of the bug was that I was using two CMS on the same page…

You said that checboxes were responsible for the “AND” behaviour on the filters. Is there a way to get exclusive filters? For example, when I click A, I get all the items with the A category. Currently, when I click B, it adds the items with A OR B categories, so it broadens the filtering. How could I get the filter to be more precise each time I click on a new category?

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [October 5, 2023, 1:45pm UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/10 "2023-10-05T13:45:15Z")

</div>

We have this setting available for CMS Filter which can set the strictness of the filter matches. The “AND” filter would be this → `fs-cmsfilter-match = all`

 ![Screen Shot 2023-10-05 at 15.43.39](https://europe1.discourse-cdn.com/flex013/uploads/finsweet1/original/2X/2/21086b6f2c83404838ead6ed9d784c526f1f9819.png)

---

<div class="post-metadata">

**Author:** ![pablo.faust](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/pablo.faust/32/1745_2.png) [@pablo.faust](https://forum.finsweet.com/u/pablo.faust)\
**Post date:** [October 16, 2023, 11:09am UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/11 "2023-10-16T11:09:33Z")

</div>

Hi again @Support-Luis ,

I’m still trying to improve my system. Currently, there is no way to indicate the user which filter is active or not. I would like to make gray all filters except the one that has been clicked. Do you have an idea on how to get there?

[https://studio-format.webflow.io/projets](https://studio-format.webflow.io/projets)

[https://preview.webflow.com/preview/studio-format?utm\_medium=preview\_link&utm\_source=designer&utm\_content=studio-format&preview=cf4a4b53cc3c76b46f8b7df3d31eb644&pageId=6525613e5e3694b8cd8495a3&workflow=preview](https://preview.webflow.com/preview/studio-format?utm_medium=preview_link&utm_source=designer&utm_content=studio-format&preview=cf4a4b53cc3c76b46f8b7df3d31eb644&pageId=6525613e5e3694b8cd8495a3&workflow=preview)

---

<div class="post-metadata">

**Author:** ![Support-Luis](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/support-luis/32/53_2.png) [@Support-Luis](https://forum.finsweet.com/u/Support-Luis)\
**Post date:** [October 24, 2023, 9:54am UTC](https://forum.finsweet.com/t/use-filters-inside-the-items-themselves/1947/12 "2023-10-24T09:54:07Z")

</div>

Hey @pablo.faust! Seems to me that you are halfway there with your hover interaction. I see you have used the active class option from CMS Filter but I do not see any `active-filter` class in your project. have you set this up?
