Display one item at a time from a multi-reference field

I have a cms collection called “City” and another cms collection called “Restaurant”. I have a multi-reference field inside “City” linking to “Restaurant”, so that I can choose the restaurants that are in that city. I want the template page for “City” to display the primary image and name of the first “Restaurant” in that multi-reference list. Then, on the side of the page I want to have a list of all the restaurants in the list. When a user clicks on a restaurant name, I want the image and name displayed to change to the selected “Restaurant”. I’m not looking to do this with the template pages for each “Restaurant” though. I want it all within the template page for “City”. I NEED HELP!

Here is my public share link: LINK
(how to access public share link)

This part s a tricky requirement to navigate, using the Restaurants CMS page would by far give the closest alignment with Webflow’s CMS design.

However here’s how I recommend you approach this build.

If the number of restaurants per city is guaranteed to be < 100, then you could accomplish this on the city page using;

  • A collection list to display your max-100 restaurants
  • A querystring param to identify the one you want featured, e.g.;
  • Custom code to display the param-specified item as the featured restaurant
    • These featured HTML chunks can be in the restaurants collection list, as hiddenk content, and tagged with a custom attribute containing the slug for easy identification
    • If no query param is present, you can just grab and display the first one.