Create Tabs Element with Data from Collection

Ask the community
,
3

Hi @naama-t-l ,

I’ve created an example solution for tabs. It requires some setup and a little of code.

Given:

  1. A dataset #tabDataset connected to a collection with titles and contents for the tabs.
  2. A repeater #tabRepeater connected to the dataset.
  3. Two buttons inside the repeater item template — #deselectedTab and #selectedTab. The buttons should have the same size and position (i.e. they’re fully overlapped). #selectedTab is hidden on load. The buttons are connected to the dataset and linked to the title column.
  4. A text representing tab content. The text is connected to the dataset and linked to the content column.

Then add the following code to the page:

$w.onReady(() => {
  const tabDataset = $w("#tabDataset");
  const tabRepeater = $w("#tabRepeater");

  const updateSelectedTab = () => {
    tabRepeater.forEachItem(($item, itemData, index) => {
      if (tabDataset.getCurrentItemIndex() === index) {
        $item("#selectedTab").show();
      } else {
        $item("#selectedTab").hide();
      }
    });
  };

  tabDataset.onReady(() => {
    updateSelectedTab();
    
    tabRepeater.forEachItem(($item, itemData, index) => {
      $item("#deselectedTab").onClick(() => {
        tabDataset.setCurrentItemIndex(index);
      });
    });
    
    tabDataset.onCurrentIndexChanged(updateSelectedTab);
  });
});

I believe its self-explanatory.

Tell me if it works for you.