How to create this course > lesson feature?

Hey Webflowers, I’m new around here and am trying to determine the best way to approach this feature.

In my CMS a course can have multiple lessons. On the course CMS page, I want to list the lessons and allow the user to select a lesson and then view the selected lesson’s video like this:
courseExample

Does webflow allow you to set / filter on variables?

Or could I use link blocks and set the select/focus state?

Thanks for your patience if this is a newbie question - I promised I have searched! :grin:

1 Like

Hey Darren, welcome to the Webflow community.
You’ve got a whole bunch of options here, depending on what you want to achieve.

The most basic way is to simply have your Lesson page contain a Collection List of all of the other Lessons in that Course, in the correct sequence. That way whatever Lesson you’re viewing, you are just one click away from a different Lesson. The URL will change and the screen will refresh, but it will look nearly identical… except that the Lesson content is different and the “selected” Lesson is different.

Side note, in this approach, you can probably use a Webflow navigation element to get automatic “Current Lesson” styling, just like you get in the top nav.

If however you are determined to have only one page, and to have the content re-load the center as the user clicks through Lessons, you can do a bit of scripting and IFRAMEs, or use jQuery to clone and insert HTML over from your Lesson collection page. Those are a bit more involved, an not advised unless you’re a dev.

2 Likes

Thanks! I’ll give that approach a shot.