Struggling to build nested CMS accordion (course → sections → lessons) in Framer
Hey everyone,
I’m building a course platform in Framer and I’m stuck on something that feels like it should be simple but isn’t.
On the CMS side, I have three collections set up:
- Courses
- Sections (linked to courses)
- Lessons (linked to sections)
So the structure is basically course → sections → lessons, and that part is working fine.
What I’m trying to build is a course curriculum UI where each section is a dropdown, and when you click it, it expands to show the lessons inside it. Also, this needs to be dynamic so each course page shows its own sections and lessons.
I’ve attached an image of the kind of UI I’m trying to replicate so you can see exactly what I mean.
The issue is I can’t figure out how to properly connect everything on the frontend. I’ve tried nesting CMS collections, playing around with multi-reference filtering, and using variants for the accordion interaction, but I can’t get a clean setup where each section independently expands and shows the right lessons.
At this point I’m not sure if:
- I’m structuring the CMS wrong
- Framer just doesn’t support this well natively
Has anyone built something like this before in Framer? A course curriculum style accordion with nested CMS data?
If you have an example, tutorial, or even just a rough explanation of how you’d structure it, that would help a lot.
Appreciate it 🙏