<div class="tabs is-centered">
    <ul>
      <li><a>Home</a></li>
      <li><a>Tech Parameters</a></li>
    </ul>
  </div>

  <div class="tabs is-centered">
    <ul>
      <li><a>Home</a></li>
      <li><a>Tech Parameters</a></li>
    </ul>
  </div>
  <div>
    <section class="tab-content">
      <table class="table">
        <tbody>
          <td>
            <%= image_tag "#{@image.name}" %>
          </td>
          <td>
            <%= @product.description %>
          </td>
        </tbody>
      </table>
    </section>
    <section class="tab-content">
      <%= @parameter.ipxx %>
    </section>
  </div>

let tabsWithContent = (function () {
  let tabs = document.querySelectorAll('.tabs li');
  let tabsContent = document.querySelectorAll('.tab-content');

  let deactvateAllTabs = function () {
    tabs.forEach(function (tab) {
      tab.classList.remove('is-active');
    });
  };

  let hideTabsContent = function () {
    tabsContent.forEach(function (tabContent) {
      tabContent.classList.remove('is-active');
    });
  };

  let activateTabsContent = function (tab) {
    tabsContent[getIndex(tab)].classList.add('is-active');
  };

  let getIndex = function (el) {
    return [...el.parentElement.children].indexOf(el);
  };

  tabs.forEach(function (tab) {
    tab.addEventListener('click', function () {
      deactvateAllTabs();
      hideTabsContent();
      tab.classList.add('is-active');
      activateTabsContent(tab);
    });
  })

  tabs[0].click();
})();