# Tabs with filters 

**URL:** <https://forum.finsweet.com/t/tabs-with-filters/3700>\
**Category:** Slider\
**Created:** [October 28, 2024, 2:48pm UTC](https://forum.finsweet.com/t/tabs-with-filters/3700 "2024-10-28T14:48:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![denys.syzomov](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.finsweet.com/denys.syzomov/32/3208_2.png) [@denys.syzomov](https://forum.finsweet.com/u/denys.syzomov)\
**Post date:** [October 28, 2024, 2:48pm UTC](https://forum.finsweet.com/t/tabs-with-filters/3700/1 "2024-10-28T14:48:08Z")

</div>

Hi! I have a question. I’m working on functionality for automatically filtering events into _upcoming_ and _past_ categories. In CMS, there’s a date field, and I need it to function like filters. Additionally, other filters should apply as well. For example, if there are 10 events, I can select a filter by _type_, and then I should be able to toggle between _upcoming_ and _past_ events while keeping the _type_ filter active.

I’ve tried several methods:

- **Tabs:** Filters work, but the empty state doesn’t display correctly.
- **Webflow visibility conditions:** These don’t work since they only apply `display: none`.
- **Date-based filtering on the front end:** Filters are triggered too early.
- **Restarting the filters after a date check:** Still didn’t work.

Any advice would be greatly appreciated!

---

<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 28, 2024, 9:28pm UTC](https://forum.finsweet.com/t/tabs-with-filters/3700/2 "2024-10-28T21:28:15Z")

</div>

Hey @denys.syzomov!

Is this the only blocker you found for this option?

> **Date-based filtering on the front end:** Filters are triggered too early.

If so, can you try moving the JS you are using into this callback function?

```js
<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsfilter',
    (filterInstances) => {
      console.log('cmsfilter Successfully loaded!');

      // Code to filter by date goes here!
    },
  ]);
</script>

```

If needed please share the link to your setup and I will take a look!