3d-explorer.js

// 3d-explorer.js

document.addEventListener('DOMContentLoaded', () => {
  const explorerTabButtons = document.querySelectorAll('.explorer-tab-button');
  const explorerContents = document.querySelectorAll('.explorer-content');

  explorerTabButtons.forEach(button => {
    button.addEventListener('click', () => {
      // Remove 'active' class from all buttons
      explorerTabButtons.forEach(btn => btn.classList.remove('active'));
      // Hide all explorer contents
      explorerContents.forEach(content => {
        content.classList.remove('active');
        content.classList.add('hidden');
      });

      // Add 'active' class to clicked button
      button.classList.add('active');
      // Show the selected explorer content
      const target = button.getAttribute('data-explorer-tab');
      const targetContent = document.getElementById(target);
      targetContent.classList.add('active');
      targetContent.classList.remove('hidden');
    });
  });
});