Tabs / Tabulated views

[Derek]

@matthieu_chateau

<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>

This code is so so helpful! However, it is possible to have the same effect with much simpler CSS. Unless you want each button to have different color when active and/or inactive, you don’t need to call out each :nth position by hand. You can just define the inactive and active classes that should be applied to all buttons within that element:

#hero3 button[data-element="button"] {
  background-color: #fafafa;
  color: #000;
}

#hero3 button[data-element="button"].active,
#hero3 button[data-element="button"]:hover {
  background-color: #8c1d40;
  color: #fff;
}

(code also modified from the original to work with a hero block instead of a CTA block).

[matthieu_chateau]

Yep, @Derek , nice call. This is what I do … for myself! But =>

But here in this community I give codes to people that want to use custom code but don’t want to understand all about it, most of the time (or at least they want to replicate or change small parts of the code easily, themselves). So I need to show everything, which is not the most efficient way but the most explicit.
It’s way easier for people to visualize what’s going on in the code, to have a minimum understanding of the code structure as they never touched it before.

Showing all the :nth-child() in the css allows to get a better understanding of the whole code (with the javascript).

Maybe I will do it more frequently, I don’t know.
I think I have some work to do to reorganize all what I did here, and it could be good to refactor the codes too.

But I can definitely tell you that when I started myself to learn coding, it helped me a lot to understand everything.