I am trying to create a web version of a user manual using webflow CMS. UI design has two columns – one, containing Chapters & Topics collections list, the other containing Topics collection’s rich-text manual content. On load, only Chapter list is shown in first column (and second column is hidden). When a Chapter item is clicked, the Topics collection list is shown. Then – and this is what I can’t figure out – when a Topic item is clicked, the content view column is populated with Topic collection’s rich-text content.
This is my basic wireframe sequence:
LOAD STATE:
CHAPTER-SELECTED STATE:
TOPIC-SELECTED STATE:
NOTE: As my description suggests, I am working with two CMS collections: 1) “Topics”, which contains topic names and rich-test manual content and 2) Chapters, which contains chapter names and multi-reference to Topics collection.
Easy enough to get the Topics to show when a chapter is clicked, but can’t figure out how to display rich-text content when a topic is clicked without a creating huge break (height of rich-text content) in the Topics list (plus various other undesirable artifacts, etc), as seen here:
Can I accomplish what I’m trying to accomplish using Webflow, or should I come up with another UI approach?
Thank you in advance!
Nick