🥳 Enjoy 3 months of Framer for free!
What are we building?
Until a week ago, this wasn't possible. However, with the latest Framer update, support has been added to create variables for the 'value' on your CMS filters. This new feature enables you to create some nice filters that can categorize your FAQ section. Let's dive in!
#1 - Setting up your CMS
Let's start with your CMS. To create the category filter, we only need a category and a title. At this point, I've only added titles and categories copied from the FAQ of YouTube, without any additional content.
#2 - Creating the category title
Create your first Collection List to generate the Category Row, and ensure that you set the text as "Display option from the Category title". If you've done this, you'll now see all of the category titles from your CMS items.
First, select your collection list and set your CMS filter to Category. Then create a variable for the value, which I've called Title-Category. This will display only the titles for the currently set category.
From now on, you'll see that a category with more than one item will be displayed multiple times. To fix this issue, click the little "+" button and set the "Limit" to 1. This will allow you to show just one category title.
#3 - Your second collection list to display your items
It's time to display the items. Add another collection list and set its title property as text retrieved from your CMS. I've created components to add hover states, and complete the process by creating an additional Category variable filter for this collection list.
#4 -Let's wrap it up
To wrap it up, we just need to pass the variables down to their respective parent components. Then, you'll be able to establish the correct variables for the FAQ section. As you can see, there are three categories, each containing its own information.
👋 I hope you've enjoyed today's drop.