New - unofficial - feature: TABS - Hide/Show multiple blocks horizontally

Guides & Help Docs
, ,
70

Yes, a code example would be:

<script>
  function getURLParameter(name) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(name);
  }

  window.addEventListener('DOMContentLoaded', (event) => {
    document.getElementById("table1").style.display = "block";
    document.getElementById("form1").style.display = "none";
    document.getElementById("chart1").style.display = "none";
    
    const tabParam = getURLParameter('tab');
    if (tabParam) {
      if (tabParam === 'table') {
        document.getElementById("table1").style.display = "block";
        document.getElementById("form1").style.display = "none";
        document.getElementById("chart1").style.display = "none";
      } else if (tabParam === 'form') {
        document.getElementById("form1").style.display = "block";
        document.getElementById("table1").style.display = "none";
        document.getElementById("chart1").style.display = "none";
      } else if (tabParam === 'chart') {
        document.getElementById("chart1").style.display = "block";
        document.getElementById("form1").style.display = "none";
        document.getElementById("table1").style.display = "none";
      }
    }
  });

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

    const buttonClickHandler = (e) => {
      const button = e.target.closest('#cta3 a[data-element="button"]:nth-child(1)');
      if (button) {
        e.preventDefault();
        document.getElementById("table1").style.display = "block";
        document.getElementById("form1").style.display = "none";
        document.getElementById("chart1").style.display = "none";
        history.pushState(null, null, '?tab=table');
      }
      const button2 = e.target.closest('#cta3 a[data-element="button"]:nth-child(2)');
      if (button2) {
        e.preventDefault();
        document.getElementById("form1").style.display = "block";
        document.getElementById("table1").style.display = "none";
        document.getElementById("chart1").style.display = "none";
        history.pushState(null, null, '?tab=form');
      }
      const button3 = e.target.closest('#cta3 a[data-element="button"]:nth-child(3)');
      if (button3) {
        e.preventDefault();
        document.getElementById("chart1").style.display = "block";
        document.getElementById("form1").style.display = "none";
        document.getElementById("table1").style.display = "none";
        history.pushState(null, null, '?tab=chart');
      }
    };

    document.body.addEventListener('click', buttonClickHandler);
  });
</script>

Here there is a CTA block with 3 buttons and 3 tabs.
Each time you will add ?tab=chart or ?tab=form or ?tab=table at the end of the url => it will display the right tab on page load

2 Likes