Create Tabs Element with Data from Collection

Ask the community
,
9

@naama-t-l

  1. You need to update the visibility of your image boxes when the dataset is ready and after the current dataset item index changes (see updateImageVisibility function):
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();
      }
    });
  };

  const updateImageVisibility = () => {
    const story = tabDataset.getCurrentItem();

    const imageBox1 = $w("#imageBox1");
    if (story.image1) {
      imageBox1.expand();
    } else {
      imageBox1.collapse();
    }

    const imageBox2 = $w("#imageBox2");
    if (story.image2) {
      imageBox2.expand();
    } else {
      imageBox2.collapse();
    }
  };

  tabDataset.onReady(() => {
    updateclientTabDisabled();
    updateImageVisibility();

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

    tabDataset.onCurrentIndexChanged(() => {
      updateclientTabDisabled();
      updateImageVisibility();
    });
  });
});
  1. The gap happens because your content is inside a strip component. The component has its own height. When the content inside exceeds the limits of the strip, the strip expands. But if the content becomes smaller in height, the strip keeps its original height.

Instead of using a strip component as a container for your content that changes dynamically you may use a strip for the header and for the footer since their content is pretty much static. So the final structure should be: header strip, content between the header and the footer (not in a strip), footer strip.