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.
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.
EASY HACK SOLUTION
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.
MULTIREF SOLUTION
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.
SA5 GROUPING SOLUTION
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.
