Tab Hover Functionality Update

November 29, 2024 · AI Conversations

User

document.addEventListener('DOMContentLoaded', function () {
// Select all tabs, tab contents, and inner divs
const tabs = document.querySelectorAll('.e-n-tabs .e-n-tab-title');
const tabContents = document.querySelectorAll('.e-n-tabs .e-n-tabs-content');
const tabDivs = document.querySelectorAll('.e-n-tabs .e-n-tabs-content > div'); // Select the inner divs inside .e-n-tabs-content

// Function to hide all tab content and remove the active class from all tabs
function hideAllTabs() {
tabDivs.forEach(content => {
content.style.display = 'none'; // Hide all tab div content
});

tabs.forEach(tab => {
tab.classList.remove('active'); // Remove active class from all tabs
});
}

// Function to show content for the clicked tab
function showTab(index) {
hideAllTabs(); // Hide all tabs and their contents

// Add the active class to the clicked tab and show the corresponding content
tabs[index].classList.add('active');
tabDivs[index].style.display = 'block'; // Show the corresponding tab's div content
}

// Initially hide all contents and show the first tab's content
hideAllTabs();
if (tabs.length > 0 && tabDivs.length > 0) {
// showTab(0); // Show the first tab's content by default
}

// Add click event listeners to all tabs
tabs.forEach((tab, index) => {
tab.addEventListener('click', function () {
showTab(index); // Show content for the clicked tab
});
});
});
change it on hover

Assistant

To make the tabs switch on hover instead of click, replace the `click` event listener with a `mouseover` event listener. Here's the updated code:

document.addEventListener('DOMContentLoaded', function () {
    // Select all tabs, tab contents, and inner divs
    const tabs = document.querySelectorAll('.e-n-tabs .e-n-tab-title');
    const tabContents = document.querySelectorAll('.e-n-tabs .e-n-tabs-content');
    const tabDivs = document.querySelectorAll('.e-n-tabs .e-n-tabs-content > div'); // Select the inner divs inside .e-n-tabs-content

    // Function to hide all tab content and remove the active class from all tabs
    function hideAllTabs() {
        tabDivs.forEach(content => {
            content.style.display = 'none';  // Hide all tab div content
        });

        tabs.forEach(tab => {
            tab.classList.remove('active');  // Remove active class from all tabs
        });
    }

    // Function to show content for the hovered tab
    function showTab(index) {
        hideAllTabs();  // Hide all tabs and their contents

        // Add the active class to the hovered tab and show the corresponding content
        tabs[index].classList.add('active');
        tabDivs[index].style.display = 'block';  // Show the corresponding tab's div content
    }

    // Initially hide all contents and show the first tab's content
    hideAllTabs();
    if (tabs.length > 0 && tabDivs.length > 0) {
        showTab(0);  // Show the first tab's content by default
    }

    // Add hover event listeners to all tabs
    tabs.forEach((tab, index) => {
        tab.addEventListener('mouseover', function () {
            showTab(index);  // Show content for the hovered tab
        });
    });
});

### Key Changes:
1. **`mouseover` Event**: Replaced `click` with `mouseover` for tab interaction.
2. **Behavior on Hover**: Now, when you hover over a tab, its content will display.

This way, the functionality remains the same, but the interaction is triggered by hovering over a tab rather than clicking it.

User

but remove on mouseout

Assistant

To hide the tab content when the mouse leaves (`mouseout`), you can add an event listener for the `mouseout` event and update the logic accordingly. Here's the modified code:

document.addEventListener('DOMContentLoaded', function () {
    // Select all tabs, tab contents, and inner divs
    const tabs = document.querySelectorAll('.e-n-tabs .e-n-tab-title');
    const tabDivs = document.querySelectorAll('.e-n-tabs .e-n-tabs-content > div'); // Select the inner divs inside .e-n-tabs-content

    // Function to hide all tab content and remove the active class from all tabs
    function hideAllTabs() {
        tabDivs.forEach(content => {
            content.style.display = 'none';  // Hide all tab div content
        });

        tabs.forEach(tab => {
            tab.classList.remove('active');  // Remove active class from all tabs
        });
    }

    // Function to show content for the hovered tab
    function showTab(index) {
        hideAllTabs();  // Hide all tabs and their contents

        // Add the active class to the hovered tab and show the corresponding content
        tabs[index].classList.add('active');
        tabDivs[index].style.display = 'block';  // Show the corresponding tab's div content
    }

    // Add hover and mouseout event listeners to all tabs
    tabs.forEach((tab, index) => {
        tab.addEventListener('mouseover', function () {
            showTab(index);  // Show content for the hovered tab
        });

        tab.addEventListener('mouseout', function () {
            hideAllTabs();  // Hide all tabs and contents when mouse leaves
        });
    });
});

### Key Changes:
1. **`mouseover` Event**: Shows the content when the mouse hovers over a tab.
2. **`mouseout` Event**: Hides all tab contents when the mouse leaves the tab area.

### Behavior:
– When you hover over a tab, its content is displayed.
– When you move the mouse out of the tab, the content is hidden.

This ensures that the tabs behave dynamically based on mouse movements.

Tab Hover Functionality Update

Leave a Comment Cancel