FAQ page managed with CMS with topic sections and sidebar nav

Hi Webflowers,

Im looking for a solution to make a FAQ page where the questions are separated by category labels (static text block) and is fully manageable with the CMS.

As I tried to illustrate in de screenshot, I now added multiple collection lists to the page and set the conditional visibility to the category is want to display in that list.

I want to make it so that when my client adds a new category it also creates a section with in the list with questions.

Does anybody know a solution for this?

Seems like you can use a tab component for this. The lefthand nav is your tab navigation and when clicked, the cms list for that category will be displayed.

1 Like

A few solutions.

If your FAQs are ordered, e.g. with a numeric ordering field that you’re sorting on, then you can put the group name as a field directly in the FAQ itself.

Then, use conditional visibility to show that group element so that it only appears when you have a heading defined. For your anchor link navigation, I’d probably use the FAQ slug as the ID for the group heading, and you can generate your group headings & links with a second collection list.

Crude but effective.

A more painful solution is two collections-

  • Groups collection
  • FAQs collection

Groups has a multiref to FAQ.
The downsides here-

  • nested collection lists, so a limit of 5 FAQs per group, but you could add a "see all and then have a group-specific page.
  • more difficult to add new FAQs. Changing the ordering of FAQs is a bit painful.

If you actually need groups for other UX or data reasons, you’ll need to do that grouping layout after the page loads, using script.

SA5 has a layout lib designed for this. You use custom attributes to tag the group container DIVs with the group slug, and you tag the FAQs with the same slug as a move target. SA5 does the layout work.


Another direction you could look.

1 Like

Thank you for the reply! Gonna check out Sygnal Attributes and gonna check if I can make it work.