Create tab with Elementor containers – JS

EXAMPLEs > https://prnt.sc/Xy4mWUbiz2H5 https://prnt.sc/D8_vtZ9RqClG

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Select all <a> tags inside the element with the class 'toggle-link'
    const links = document.querySelectorAll('.toggle-link .elementor-icon-list-item');
    if (links.length > 0) {
        links[0].classList.add('active');
    }

    // Loop through each link and add a click event listener
    links.forEach(function(link) {
        link.addEventListener('click', function(e) {
            // Remove the 'active' class from all links
            links.forEach(function(link) {
                link.classList.remove('active');
            });

            // Add the 'active' class to the clicked link
            link.classList.add('active');
        });
    });
});
document.addEventListener("DOMContentLoaded", function() {
    // Get the hash from the URL
    const hash = window.location.hash.substring(1); // Remove the '#' symbol
    const allContainers = document.querySelectorAll('.hidden-container');
    const targetContainer = document.getElementById(hash);
    
    // Hide all containers
    allContainers.forEach(function(container) {
        container.style.display = 'none';
    });
    
    // If the hash matches a container ID, show it
    if (targetContainer) {
        targetContainer.style.display = 'block'; // or 'flex', depending on your layout
    } else {
        // If no hash matches, show the default container (e.g., #container-1)
        document.getElementById('all-vehicles').style.display = 'block';
    }
});

// Optional: Update visibility dynamically when the hash changes
window.addEventListener("hashchange", function() {
    const hash = window.location.hash.substring(1);
    const allContainers = document.querySelectorAll('.hidden-container');
    const targetContainer = document.getElementById(hash);
    
    // Hide all containers
    allContainers.forEach(function(container) {
        container.style.display = 'none';
    });

    // Show the target container if hash matches
    if (targetContainer) {
        targetContainer.style.display = 'block';
    }
});

</script>