script.js

const menuButton = document.querySelector('.menu-button');
        const mobileNav = document.querySelector('.mobile-nav');

        menuButton.addEventListener('click', () => {
            mobileNav.classList.toggle('show');
        });

        
// Select all tab buttons and tab content sections
const tabs = document.querySelectorAll('.tab');
const tabContents = document.querySelectorAll('.tab-content');

// Loop through each tab and add a click event
tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    const target = tab.dataset.target; // get the data-target value (e.g., 'appointment-table')

    // 1. Remove 'active-tab' from all tabs
    tabs.forEach(t => t.classList.remove('active-tab'));

    // 2. Hide all tab contents
    tabContents.forEach(content => content.classList.remove('active-table'));

    // 3. Add 'active-tab' to the clicked tab
    tab.classList.add('active-tab');

    // 4. Show the target tab content
    const targetContent = document.querySelector(`.${target}`);
    if (targetContent) {
      targetContent.classList.add('active-table');
    }
  });
});