Is it possible to create a "show more" button in Webflow to display all records in an FAQ collection list?
TL;DR
- Limit FAQ items shown via Collection List settings and add a "Show More" button below.
- Use native pagination styled as a button or integrate Finsweet’s CMS Load for AJAX-style in-page expansion.
Yes, it's possible to create a "Show More" button in Webflow to reveal more FAQ items from a Collection List using native tools and optional custom code.
1. Limit the Initial Items Displayed in the Collection
- Add a Collection List to your Webflow page and connect it to your FAQ collection.
- Under Collection List Settings, set a limit for how many items display initially (e.g., 5).
- This ensures only a portion of the FAQs appear on initial page load.
2. Add a “Show More” Button Below the List
- Drag in a Button element right below your Collection List.
- Label it something like Show More or Load All FAQs.
- Give this button a class name like
show-more-button.
3. Use Webflow’s Pagination or Load More Feature (CMS)
- Webflow doesn't have a native “load more in place” button, but you can use pagination to replicate this.
- Go to the Collection List Wrapper, enable Pagination under Collection List Settings.
- Style the pagination elements to look like a Show More button.
- Alternatively, use Finsweet’s “CMS Load” library (https://www.finsweet.com/cmsload).
4. Option: Use Finsweet’s CMS Load for "Show More"
If you want a seamless in-page "Show More" without reloading (using AJAX):
- Go to https://www.finsweet.com/cmsload.
- Follow their step-by-step setup:
- Add custom CMS Load attributes to your elements.
- Place the Finsweet JS snippet (through custom code in Page Settings or Site Settings).
- Supports "Load More" or "Infinite Scroll" without reloading or switching pages.
Summary
You can create a Show More button in Webflow by using Collection List limits with pagination or by leveraging Finsweet’s CMS Load tool. Native pagination reloads the page, while Finsweet provides a seamless AJAX-like expansion.
