This is a common pattern in user interface (UI) design where a list of items (the "master" pane) is used to select items to view or edit in a separate pane (the "detail" pane).
In a Master-Detail layout, selecting an item from the master list typically causes the detail pane to update with detailed information about the selected item. This can be very efficient for user workflows that involve browsing through a list of items and taking action on individual items.
This pattern can be seen in many types of applications, including email clients (where you have a list of emails and the content of the selected email), file browsers, and many mobile apps. It's a powerful way to handle the relationship between items in a collection and their individual details.
In Webflow there are three basic approaches to this.
Interactions Approach
Load all of the master & detail content on the page all at once using a collection list, and then use interactions to hide and show the detail content.
Here's an example using a pop-up for the detail.
https://cms-modals.webflow.io/#
IFRAME Detail Loading
Use IFRAMEs, and load the detail content into the IFRAME. Typically this requires a small amount of custom code, since Webflow does not have a built-in way to target links to IFRAMEs.
HTML Embeds can be used for this purposes as well, to create the detail-loading links correctly from the CMS item.
This approach can work well if you’ve styled your individual article pages to display well inside of an IFRAME.
AJAX-Style Detail Loading
You can use JS .fetch() to get the content you want from the article page and display it.
https://discourse.webflow.com/t/seamless-cms-page-load/233727/3?u=memetican
https://ajax-load-team-members.webflow.io/
FAQs
Answers to frequently asked questions.
