Tab Content Hover Functionality

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 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
});
});
});

if outside tab then close cotnent

Assistant
To implement functionality where the content of the tabs closes when clicking outside the tabs, you can add an event listener for clicks on the document. When the click occurs outside the `.e-n-tabs` container, all the tab contents will be hidden.

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
    const tabsContainer = document.querySelector('.e-n-tabs'); // Select the tabs container

    // 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);  // Uncomment to 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
        });
    });

    // Add a click event listener on the document
    document.addEventListener('click', function (event) {
        if (!tabsContainer.contains(event.target)) {
            // If the click is outside the tabs container, hide all tabs
            hideAllTabs();
        }
    });
});

### Explanation:
1. **`tabsContainer`**:
– A reference to the main container for the tabs (`.e-n-tabs`).
2. **Document Click Event**:
– An event listener is added to the document to detect clicks anywhere on the page.
3. **`contains` Method**:
– Checks if the click occurred within the `.e-n-tabs` container.
– If the click is outside, the `hideAllTabs` function is triggered to hide all tab contents.

This will ensure that tab content closes whenever you click outside the `.e-n-tabs` container.

User
on mouseout/click
Assistant
To hide the tab content on both `mouseout` and `click` events outside the tabs, you can modify the script to include the `mouseout` event for the tabs container and handle hiding content accordingly.

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 tabDivs = document.querySelectorAll('.e-n-tabs .e-n-tabs-content > div'); // Select the inner divs inside .e-n-tabs-content
    const tabsContainer = document.querySelector('.e-n-tabs'); // Select the tabs container

    // 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
    hideAllTabs();

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

    // Add mouseout event listener to the tabs container
    tabsContainer.addEventListener('mouseout', function (event) {
        // Check if the mouse has left the entire `.e-n-tabs` container
        if (!tabsContainer.contains(event.relatedTarget)) {
            hideAllTabs();
        }
    });

    // Add a click event listener on the document
    document.addEventListener('click', function (event) {
        if (!tabsContainer.contains(event.target)) {
            // If the click is outside the tabs container, hide all tabs
            hideAllTabs();
        }
    });
});

### Explanation:
1. **`mouseover`**:
– Shows the tab content when a tab is hovered.
2. **`mouseout`**:
– Added to the `.e-n-tabs` container. It checks if the mouse has exited the entire container by using `event.relatedTarget` to detect if the pointer moved outside.
3. **`click`**:
– Detects clicks outside the `.e-n-tabs` container to hide the tab content.

### Combined Behavior:
– **Mouse Out**: The content hides when the mouse leaves the `.e-n-tabs` container.
– **Click Outside**: The content hides if a click occurs anywhere outside the `.e-n-tabs` container.

Leave a Comment

Your email address will not be published. Required fields are marked *