Create Tabs Element with Data from Collection

[naama-t-l]

@Yevhen Pavliuk Hi again
So far I have been having fun with this code, and it works well, apart from a couple of things I am scratching my head on.

1. I The are 2 box elements in there, set to collapse on load, with code to expand if there’s data in the Image items that sit inside the boxes. It works well only if there is data, but if there isn’t - it will show the boxes empty, rather than collapse.

2. For some reason when going to preview mode or live - there is a huge gap that opens under the whole box. Why is this happening?

Thanks in advance!

Here is the code I have on this page:

import wixData from 'wix-data';

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

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

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

$w.onReady(function () {
  $w('#SuccessStoriesDataset').getCurrentItem();
  showExistingMedia();

});

function showExistingMedia() {
  $w("#SuccessStoriesDataset").onReady(() => {
 if ($w("#image1").src !== null) $w("#imageBox1").expand();
 if ($w("#image2").src !== null) $w("#imageBox2").expand();
 else {
    $w("#imageBox1").collapse();
    $w("#imageBox2").collapse();
  }
    });
}