Create tab-style content box with items from content manager?

Ask the community
, , ,
1

Hi there!
I am wondering if anyone knows of a workaround that would allow me to recreate the function of the tab or multi-state box elements but have the content and number of tabs determined by the items in my connected dataset?

I’ve used tabs before, but for this project, I want to be able to update the tabs (content and number of) via the content manager.

For example, some days, I’d like to have 2 tabs (e.g., dogs, cats) and another data 4 tabs (e.g., dogs, cats, horses, lizards). I’d like to have my two/three/four/etc. tabs update automatically based on the values in my connected dataset and then the corresponding content for each box connected to other fields in that data set. All of this is to say, to have the content update automatically so that I don’t have to format everything every time that I need to update this page (frequently!).

My initial go-to was to just manipulate the DOM but that doesn’t seem possible on here. Is that right?

Any ideas? Thanks!

2

Could you add something like this to the code? I don’t think this is fully correct for velo but something similar might work.

$w.onReady(function () {
// get the data from your collection
let collectionData = [];

wixData.query(“MyCollection”)
.find()
.then((results) => {
collectionData = results.items;
generateTabs(collectionData);
});

// function to generate the HTML for your tabs
function generateTabs(data) {
// get the tab container element
let tabContainer = $w(“#myTabContainer”);

// clear any existing tabs 
tabContainer.removeAll(); 

// loop through the data and create a new tab for each item 
data.forEach((item) => { 
  // create a new tab element 
  let newTab = $w("<tab></tab>"); 

  // set the tab label and content based on the data 
  newTab.label = item.tabName; 
  newTab.content = item.tabContent; 

  // add the new tab to the container 
  tabContainer.add(newTab); 
});

}
});

3

Hello!