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>

<script>
window.addEventListener('DOMContentLoaded', function() {
   jQuery(function() {
       jQuery('#unify-[slug]').load("/[collection-name-slug]/[slug] .authors-list")
   });
});
</script>

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)and change the fetch url /[collection-name-slug]/ to the collection name of your project (e.g. /post/). 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 ;-).

Add on (alphabetic sorting of nested collection lists): With the internal functions of Webflow it is not possible to sort nested collection items. The order is determined exclusively by the order of the tags in the CMS field. However, you can sort the list on the frontend side with an additional jQuery. For alphabetical sorting you could use something like this and add it to the before </body> tag of the page, where you would sort the nested collection list:

<script>
// sort nested collection items "authors" alphabetical after DOM loaded
window.addEventListener('load', function() {
$('.authors-list').each(function(){
   $(this).children('.author').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});
});
// sort nested collection items "tags" alphabetical after DOM loaded
window.addEventListener('load', function() {
$('.tags-list').each(function(){
   $(this).children('.tag').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});
});
</script>

Have fun, stay healthy and happy coding!

Special use Cases

Multi-Image Gallery & Lightbox

If you want to use the nested collections script in conjunction with a multi-image field, for example to display a gallery with more than 5 photos as a nested collection on a static page, you need a slightly different setup.
For this use case you can find a separate clonable project under the following link, in which a simple photo gallery was included as a nested collection as well as a photo gallery that additionally uses a lightbox component.
NEsted Multi-Image Gallery (with Lightbox component)
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 Us