How to nest unlimited Collections with jQuery .load()
Learn how to setup your Webflow Project with multiple Nested Collections Lists

Clone and inspect this project (e.g. the blog example) or read this short documentation to start from scretch.

First step: Create a collection list on a CMS collection page and give the collection list element (not the collection list wrapper) an individual class. The collection list element will serve as the nested collection on your static pages and the class you've given to it serves as an indentifier to fetch the element with the jQuery .load() function.

Nested Collection in Webflow

Second step: Insert the following code snippet with HTLM embed into the collection list on your static page (e.g. your blog post overview) or into a collection list on another CMS collection page (e.g. the category or tag CMS template page). Place the HTML embed at the place where the nested collection list should appear.

<div class="authors-list" id="unify-[slug]"></div>

window.addEventListener('DOMContentLoaded', function() {
   jQuery(function() {
       jQuery('#unify-[slug]').load("/post/[slug] .authors-list")

Third step: Adjust the unify-[slug] part and the url-part in the code snippet (marked in purple and red). Replace [slug] with the dynamic slug element by using the "+ Add Field" in the upper right corner of the HTML Embed Code Editor. Replace unify- with an individual piece of text to get an individual ID for each nested collection list. This step is important if you use multiple nested collections within the parent collection (e.g. authors, tags and categories). Adjust the URL in the code snippet to point to the CMS template page that contains the collection you want to embed as a nested collection. Therefore, use the dynamic slug element (+ Add Field" in the upper right corner of the HTML Embed Code Editor). Finally you have to adjust the class (marked in blue). Use the class you gave to the collection list you want to nest (see first step above). In this example this is the class .authors-list.

You made it!

Below is an example of the code you can use for your Nested Collection and as it is used in this sample project.

Nested Collection in Webflow - jQuery .load() function code snipped example.

That's it! You can start from scretch using the code above or simply clone this project and then inspect the blog overview page to gain a better understanding for nesting collection lists and collection items with jQuery .load().

...and should you be concerned about your website performance because of the inclusion of the nested collection with jQuery? You can rest assured! Here is the Goole Lighthouse Score for this project page ;-).

Have fun, stay healthy and happy coding!

Report issues!
The goal of this project is to create a simple and practical solution that is freely available to everyone. Please share your feedback at my GitHub Repository so that we can further develop this solution together!
GitHub Repo
Need help?
Let me know if you have any questions or suggestions about nested collections in Webflow.
Contact me