Tabs
Use cases
How to use it
Paste before </body> tag of the page you're working with.
<script src="https://cdn.jsdelivr.net/npm/@finsweet/cms-library@1/cms-library.js"></script>
<script>
// immediately/self invoked function. This function executes right away
(function() {
// create a new Library instance and store it in a variable called "fsTabs"
var fsTabs = new FsLibrary('.fs-dynamic-feed') // Class of your hidden CMS collection list
// run tabs on our instance
fsTabs.tabs({
tabComponent: '.fs-tabs', // Webflow Tabs component
tabContent: '.fs-tab-content' // class of the element that will be used for the content of the tab
})
})();
</script>
Code explanation
The variable we created to store our Library instance. The name of the variable can be set to whatever you want.
The class of the hidden Collection List that holds our dynamic CMS List.
This is our real feed of data that we want to populate inside the Tabs component. This should be hidden on the page.
The class of the Webflow Tabs component that will display our dynamic CMS List. This class is placed on the native Webflow Tabs component.
The class of the content you want displayed inside the tab link.
If you place the class ~.fs-tab-content~ on a <div> element. The entire <div> including all children elements will be placed inside the tab button for that item.
As of v1.8, tabName as been depreciated. tabContent allows for more powerful tab personalization.
The class of the text that will be the visible name of the tab for that item.
HTML and class setup
IMPORTANT: This is easy to set up. You must understand how to structure your page for this to work.
The outer parent of the native Webflow tabs component needs a class. In this example, we call it ~.fs-tabs~
The CMS Collect List that will hold the dynamic information we want to display in the tabs component. This will be hidden on the page. In this example, we call it ~.fs-dynamic-feed~
CMS Library is going create a new ~.fs-tabs-link~ and ~.fs-tabs-pane~ for every item inside of your ~.fs-dynamic-feed~. If you have 50 items inside your ~.fs-dynamic-feed~, there will be 50 ~.fs-tabs-pane~ elements created. We will then "copy" ~.fs-dynamic-content~ and paste it in the ~.fs-tabs-pane~ that was created for that item.
Add a text element inside your ~.fs-dynamic-content~ element. Give it a class. In this example, we call it ~.fs-tab-name~.
CMS Library is going "copy" ~.fs-tab-name~ from each item and "paste" it in the ~.fs-tabs-link~ that was created for that item.
Note: as of version 1.8, tabName is depreciated. tabContent allows for more personalized tab content.