Code for Creating Image Tab Contents for Funnelish

custom.html

<script>
document.addEventListener('DOMContentLoaded', () => {
    const contentabs = document.querySelector(".tabContents");
    const content = Array.from(contentabs.children);

    content.forEach((item, index) => {
        item.classList.add("content-tab");
        if (index === 0) {
            item.classList.add("active");
        }
    });

    const buttons = document.querySelectorAll(".tbBtns .img img");
    buttons.forEach((btn, btnIndex) => {
        
        if (btnIndex === 0) {
            btn.classList.add("active-btn");
        }

        btn.addEventListener("click", (event) => {
            event.preventDefault(); // Prevent default action

            // Remove active class from all items
            content.forEach((child) => child.classList.remove("active"));
            // Add active class to the corresponding content item
            content[btnIndex].classList.add("active");

            // Remove active class from all buttons
            buttons.forEach((button) => button.classList.remove("active-btn"));
            // Add active class to the clicked button
            btn.classList.add("active-btn");

            // Optionally, you can do something with btnIndex here
            console.log(`Button index: ${btnIndex} clicked`);
        });
    });
});
</script>
<style>
/*
* Tab Contents
*/
.tabContents .content-tab {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out;
    z-index: -1;
}
.tabContents .content-tab.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 0;
    transition-delay: .2s;
}
.tbBtns .img img {
    border-width: 1px !important;
    border-style: solid !important;
    border-color: rgb(220, 220, 220) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}
.tbBtns .img img.active-btn {
    border-width: 1px;
    border-style: solid;
    border-color: rgb(58, 35, 28) !important;
}
</style>