Using jQuery to display dynamic CMS content

Design help Custom code
1

Hey guys

Would you be able to help me figure out how to make a replica of this page: https://portorocha.com/

Code is not really my strong side, but as you can see, the page load individual CMS collection pages within a div without the left navigation is loading or changing when clicking on a certain project. As you can see, the URL changes to the corresponding page when clicking in the navigation. How is this possible?

The only thing I can think of is using the same layout on all CMS pages, but that would force the navigation to reload on page load and scroll to the top.

Can you help me out? Maybe there’s even a cloneable somewhere I just haven’t found. Thank you so much.

Btw, I checked this out (https://ajax-load-team-members.webflow.io/), but that doesn’t change the URL to the corresponding page, so that’s really not what I’m trying to achieve.

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

you can simply modify the code of that cloneable to push the new url with browser history api, maybe rewrite it in plain js for better performances

3

I think SWUP.js could help you here.

It’s a JS library that allows you to only load certain elements of a page when you click on a link.
So in your case, if you would click on one of the projects in the projects list on the left side, it would only load the content of the project that sits on the linked page, but it won’t re-load the project list on the left side.

It’s not very easy to do the setup, but I think there are a few tutorials on youtube.

Hope this helps.