Tabs / Tabulated views

Feature Requests
18

Here is an updated version of the TABS feature, using Softr CTA blocks and not hard-coded buttons

Demo here: https://test-play.softr.app/hide-show-copy

Code to be inserted in the header of your page settings

<style>
#cta3 a[data-element="button"]:nth-child(1) {
  background-color: #f5f5f5;
  color: #333;
}

#cta3 a[data-element="button"].active:nth-child(1),
#cta3 a[data-element="button"]:nth-child(1):hover,
#cta3 a[data-element="button"].active:nth-child(1):hover {
  background-color: #ff0000;
  color: #fff;
}

#cta3 a[data-element="button"]:nth-child(2) {
  background-color: #f5f5f5;
  color: #333;
}

#cta3 a[data-element="button"].active:nth-child(2),
#cta3 a[data-element="button"]:nth-child(2):hover,
#cta3 a[data-element="button"].active:nth-child(2):hover {
  background-color: #ff0000;
  color: #fff;
}

#cta3 a[data-element="button"]:nth-child(3) {
  background-color: #f5f5f5;
  color: #333;
}

#cta3 a[data-element="button"].active:nth-child(3),
#cta3 a[data-element="button"]:nth-child(3):hover,
#cta3 a[data-element="button"].active:nth-child(3):hover {
  background-color: #ff0000;
  color: #fff;
}
</style>

The code to be inserted in the footer of the page settings

<script>
 window.addEventListener('DOMContentLoaded', (event) => {
  document.getElementById("table1").style.display = "block";
  document.getElementById("form1").style.display = "none";
  document.getElementById("chart1").style.display = "none";
  document.querySelector('#cta3 a[data-element="button"]:nth-child(1)').classList.add('active');
});

window.addEventListener('block-loaded-cta3', () => {
  console.log('CTA Block loaded');

  const buttonClickHandler = (e) => {
    const button = e.target.closest('#cta3 a[data-element="button"]');
    if (button) {
      e.preventDefault();
      const activeButton = document.querySelector('#cta3 a[data-element="button"].active');
      if (button !== activeButton) {
        activeButton.classList.remove('active');
        button.classList.add('active');
        const buttonIndex = Array.from(button.parentNode.children).indexOf(button) + 1;
        if (buttonIndex === 1) {
          document.getElementById("table1").style.display = "block";
          document.getElementById("form1").style.display = "none";
          document.getElementById("chart1").style.display = "none";
        } else if (buttonIndex === 2) {
          document.getElementById("form1").style.display = "block";
          document.getElementById("table1").style.display = "none";
          document.getElementById("chart1").style.display = "none";
        } else if (buttonIndex === 3) {
          document.getElementById("chart1").style.display = "block";
          document.getElementById("form1").style.display = "none";
          document.getElementById("table1").style.display = "none";
        }
      }
    }
  };
  
  document.body.addEventListener('click', buttonClickHandler);
});
</script>
1 Like