<script>
(function() {
  var tabConfig = {
    'tab1': ['#rec838602547'],
    'tab2': ['#rec839714828', '#rec839714840'],
    'tab3': ['#rec839716842']
  };

  function initTabs() {
    var tabButtons = document.querySelectorAll('[class*="tab"]');

    Object.values(tabConfig).forEach(function(blocks) {
      blocks.forEach(function(blockId) {
        var block = document.querySelector(blockId);
        if (block) block.style.display = 'none';
      });
    });

    tabConfig['tab1'].forEach(function(blockId) {
      var block = document.querySelector(blockId);
      if (block) block.style.display = 'block';
    });

    tabButtons.forEach(function(button) {
      button.addEventListener('click', function() {
        var tabClass = this.className.match(/tab(\d+)/);
        if (!tabClass) return;

        tabClass = 'tab' + tabClass[1];
        var currentTabBlocks = tabConfig[tabClass];

        Object.values(tabConfig).forEach(function(blocks) {
          blocks.forEach(function(blockId) {
            var block = document.querySelector(blockId);
            if (block) block.style.display = 'none';
          });
        });

        if (currentTabBlocks) {
          currentTabBlocks.forEach(function(blockId) {
            var block = document.querySelector(blockId);
            if (block) block.style.display = 'block';
          });
        }

        if (typeof t_lazyload_update === 'function') {
          t_lazyload_update();
        }
        window.dispatchEvent(new Event('resize'));
      });
    });
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initTabs);
  } else {
    initTabs();
  }
})();
</script>

<style>
[class*="tab"] {
  cursor: pointer;
}
</style>